JavaScript mask (model) features simple implementation code _javascript tips

Ideas:

• Create a mask that sets the stacking order of the masks to ensure that other elements can be covered

Position:absolute;
top:0;
left:0;
Display:none;
Background-color:rgba (9, 9, 9, 0.63);
width:100%;
height:100%;
z-index:1000; • Set the background color and presentation format of the content in the Mask
width:50%;
Text-align:center;
Background: #ffffff;
border-radius:6px;
margin:100px Auto;
line-height:30px;
z-index:10001; • Bind events, dynamically toggle the Display property
function Showmodel () {
document.getElementById (' MyModel ') of the mask. Style.display = ' block ' ;
}
function Closemodel () {
document.getElementById (' MyModel '). style.display = ' none ';
}

Note: Mask to adopt absolute positioning, width and Gaoyao accounted for full the entire page, stacking order to be large

Source

<!
DOCTYPE html>  

The above is a small set to introduce the JavaScript mask (model) function of the simple implementation code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!