####
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: gray; height: 800px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity:0.6; } .c2{ background-color: white; height: 300px; 300px; position: fixed; left:50%; top:50%; margin: -150px; } .hide{ display: none; } </style> </head> <input type="button" value="添加主机" onclick="ShowModel()"> <body> <table> <thead> <tr> <th> 主机 </th> <th> 端口 </th> </tr> </thead> <tbody> <tr> <td> 1.1.1.1 </td> <td> 8080 </td> </tr> <tr> <td> 1.1.1.2 </td> <td> 3306 </td> </tr> </tbody> </table> <div id="i1" class="c1 hide"></div> <div id="i2" class="c2 hide"> <P>主机：<input type="text" placeholder="IP"></P> <P>端口：<input type="text" placeholder="PORT"></P> <input type="button" value="取消" onclick="CancleShowModel()"> <input type="button" value="确定"> </div> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide') document.getElementById('i2').classList.remove('hide') } function CancleShowModel(){ document.getElementById('i1').classList.add('hide') document.getElementById('i2').classList.add('hide') } </script> </body> </html>
####
效果：
| 主机 | 端口 |
|---|---|
| 1.1.1.1 | 8080 |
| 1.1.1.2 | 3306 |