<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: greenyellow; opacity: 0.6; } .c2{ 500px; height: 500px; background-color: dodgerblue; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="show()"/> <table> <thead> <tr> <th>主机 </th> <th>端口器</th> </tr> </thead> <tbody> <tr> <td>123123</td> <td>567567</td> </tr> <tr> <td>789789</td> <td>567567</td> </tr> <tr> <td>11111111</td> <td>567567</td> </tr> </tbody> </table> </div> <!--增加表层--> <div id="i1" class="c1 hide"></div> <!--表层结束--> <!--弹出框--> <div id="i2" class="c2 hide"> <p><input type="text"/> </p> <p><input type="text"/> </p> <p><input type="button" value="确定"/> </p> <p><input type="button" value="取消" onclick="hide()"/> </p> </div> <!--弹出框结束--> <script> function show() { document.getElementById('i1').classList.remove('hide') document.getElementById('i2').classList.remove('hide') } function hide() { document.getElementById('i1').classList.add('hide') document.getElementById('i2').classList.add('hide') } </script> </body> </html>