原理：

　　利用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>

 

显示效果：