<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态对话框</title> <style> .hide{ display: none; } .c1{ position: fixed; top:0; left:0; right: 0; bottom:0; background-color:black ; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; 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="ShowModel()";> <table> <thead> <tr> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>8888</td> </tr> <tr> <td>1.1.1.2</td> <td>8882</td> </tr> <tr> <td>1.1.1.3</td> <td>8883</td> </tr> </tbody> </table> </div> <!--遮罩层begin--> <div id="i1" class="c1 hide"></div> <!--遮罩层end--> <!--弹出框开始--> <div id="i2"class="c2 hide"> <p><input type="text"/></p> <p><input type="text"/></p> <p><input type="text"/></p> <p> <input type="button" value="确定" onclick="AddModel()" > <input type="button" value="取消" onclick="AddModel()"> </p> </div> <!--弹出框结束--> <script> function ShowModel() { document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide') } function AddModel() { document.getElementById('i1').classList.add('hide') document.getElementById('i2').classList.add('hide') } </script> </body> </html>