<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>模态对话框</title>
<meat charset="UTF-8"></meat>
<style>
#div1{
left:0;
top:0;
height: 2000px;
background-color: greenyellow;
position: fixed;
width: 100%;/*必须加宽度，因为fixed脱离文档流*/
z-index: 1000;/*在最下层*/
}
#div2{
background-color: red;
opacity:0.4;
position: fixed;
width: 100%;/*必须加宽度，因为fixed脱离文档流*/
z-index: 1001;/*在中层*/
top:0;
left:0;
right:0;
bottom: 0;
}
#div3{
height: 200px;
width: 200px;
background-color: #2eb1fc;
position: absolute;
top:50%;
left:50%;
z-index: 1002;/*在最上层*/
margin-top: -100px;
margin-left: -100px;/*将框调整到最中间*/
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="div1">
<input type='button' value="click" onclick="show()">
</div>
<div id="div2" class="hide div"></div>
<div id="div3" class="hide div">
<input type="button" value="cancel" onclick="cancel()">
</div>
<script>
function show() {
var ele=document.getElementsByClassName('div');
for(var i=0;i<ele.length;i++){
ele[i].classList.remove('hide');
}
}
function cancel() {
var ele=document.getElementsByClassName('div');
for(var i=0;i<ele.length;i++){
ele[i].classList.add('hide');
}
}
</script>
</body>
</html>
