弹窗 样式
<html>
<head>
<title>弹出层</title>
<meta charset="utf-8">
<style>
.mask_class{
background:black;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
opacity:0.3;
filter:alpha(opactity:30);
z-index:1001;
display:none;
}
.dialog{
background:#fff;
width:50%;
height:60%;
position:absolute;
top:20%;
left:24%;
z-index:1002;
border: 16px solid lightblue;
overflow:auto;
display:none;
}
.close_div{
text-align:right;
cursor:default;
}
</style>
<script>
window.onload= function(){
document.getElementById("close_dialog").onclick = function(){
document.getElementById("mask_id").style.display = "none";
document.getElementById("dislog_id").style.display = "none";
}
}
function show_dialog(bg,show){
document.getElementById(bg).style.display = "block";
document.getElementById(show).style.display = "block";
}
</script>
</head>
<body>
<span style="cursor:default;" onclick="show_dialog('mask_id','dislog_id')">弹出</span>
<div class="mask_class" id="mask_id"></div>
<div class="dialog" id="dislog_id">
<div class="close_div" ><span id="close_dialog">关闭<span></div>
<div>this is mask</div>
</div>
</body>
</html>