原理：
利用CSS布局产生一个全局的窗口的对当前页面进行覆盖，然后在弹出窗口中布局表单进行交互。
Demo：
1 <!DOCTYPE html>
2 <html lang="en" dir="ltr">
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style media="screen">
7 .overlay {
8 position: fixed;
9 top: 0;
10 right: 0;
11 bottom: 0;
12 left: 0;
13 z-index: 103;
14 width: 100%;
15 height: 100%;
16 background: #666666;
17 opacity: 0.7;
18 }
19
20 .modal {
21 position: absolute;
22 top: 0;
23 right: 0;
24 bottom: 0;
25 left: 0;
26 z-index: 101;
27 margin: 100px auto;
28 width: 600px;
29 height: 400px;
30 background: lightyellow;
31 text-align: center
32 }
33 .modalControl {
34 visibility: hidden;
35 }
36 </style>
37 </head>
38 <body>
39 <button class="experiment">控制</button>
40 <div class="overlay modalControl">
41 <div class="modal">
42 模态弹出窗口
43 <button class="reset">退出窗口</button>
44 </div>
45 </div>
46 <script>
47 let func = function () {
48 let x = document.querySelector(‘.overlay‘)
49 x.classList.toggle(‘modalControl‘)
50 }
51
52 // 弹出模态窗口
53 let ele = document.querySelector(‘button‘)
54 ele.addEventListener(‘click‘, func)
55
56 // 退出模态窗口
57 ele = document.querySelector(‘.reset‘)
58 ele.addEventListener(‘click‘, func)
59 </script>
60 </body>
61 </html>
显示效果：
原文：https://www.cnblogs.com/oulae/p/11221559.html