<!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>
来源：https://www.cnblogs.com/startl/p/12270228.html