思路
1.界面点击按钮
2.遮罩层
3.带确定按钮等的一个小页面
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .content { height: 1080px; background-color: pink; } .shade { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.5; } .model { width: 200px; height: 200px; background-color: bisque; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .hide { display: none; } </style> </head> <body> <div class="content"> <button onclick="func()">show</button> <!-- 界面点击按钮 --> hello world </div> <!-- 遮罩层 --> <div class="shade hide"></div> <!-- 带确定按钮等的一个小页面 --> <div class="model hide"> <button onclick="cancel()">show</button> </div> <script type="text/javascript"> function func(argument) { // 界面按钮点击时取消隐藏的元素（显示小页面和遮罩层） var ele_shade = document.getElementsByClassName(‘shade‘)[0] ele_model.classList.remove("hide") var ele_model = document.getElementsByClassName(‘model‘)[0] ele_shade.classList.remove("hide") } function cancel() { // 点击小页面按钮时隐藏小页面和遮罩层 var ele_shade = document.getElementsByClassName("shade")[0] var ele_model = document.getElementsByClassName("model")[0] ele_model.classList.add("hide") ele_shade.classList.add("hide") } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #0f0f0f; opacity: 0.5; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: #f9f9f9; position: fixed; left: 50%; top: 50%; margin-top: -200px; margin-left: -250px; z-index: 10; } .hide{ display: none; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowMod();"> </div> <!--遮罩层开始--> <div id=‘id1‘ class="c1 hide"> </div> <!--遮罩层结束--> <!--弹出框开始--> <div id=‘id2‘ class="c2 hide"> <p class="=c3"><input type="text" placeholder="username"></p> <p><input type="password" placeholder="password"></p> <p><input type="button" value="取消" onclick="HideMod();"> <input type="button" value="确定"></p> </div> <!--弹出框结束--> <script> function ShowMod() { document.getElementById(‘id1‘).classList.remove(‘hide‘); document.getElementById(‘id2‘).classList.remove(‘hide‘); } function HideMod() { document.getElementById(‘id1‘).classList.add(‘hide‘); document.getElementById(‘id2‘).classList.add(‘hide‘); } </script> </body> </html>
原文：https://www.cnblogs.com/tanzizheng/p/12844955.html