1、效果示意图
2、主要标签属性
3、实现代码
1、效果示意图
要实现类似如下效果：点击”大模态框”，中间出现一层遮盖整个页面的半透明页面，最上面出现”Large modal”界面
2、主要用到的标签属性
1 Style标签：编辑css属性
2 Position属性：固定页面
3 Opacity属性：设置二层透明度
4 z-index属性：配置多层页面的优先级，优先级越大，放在越上面
5 display属性：设置页面隐藏与显示
6 script标签：配置相应函数使display随心所欲的显示
7 onclick属性：点击时触发
3、实现代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*遮罩层css*/ 8 .c1{ 9 position: fixed; 10 top: 0;bottom: 0; 11 left: 0;right: 0; 12 background-color: black; 13 opacity: 0.5; 14 z-index: 5; 15 } 16 /*弹窗层css*/ 17 .c2 { 18 position: fixed; 19 width: 500px; 20 height: 400px; 21 top: 50%; 22 left: 50%; 23 margin-top: -300px; 24 margin-left: -250px; 25 background-color: white; 26 z-index: 10; 27 } 28 /*取消多层页面显示*/ 29 .hide{ 30 display: none; 31 } 32 </style> 33 </head> 34 <body> 35 <!--表格界面--> 36 <div> 37 <table border="1px;"> 38 <thead> 39 <tr> 40 <td>IP</td> 41 <td>掩码</td> 42 </tr> 43 </thead> 44 <tbody> 45 <tr> 46 <td>1.1.1.1</td> 47 <td>255.255.255.0</td> 48 </tr> 49 <tr> 50 <td>1.1.1.1</td> 51 <td>255.255.255.0</td> 52 </tr> 53 <tr> 54 <td>1.1.1.1</td> 55 <td>255.255.255.0</td> 56 </tr> 57 </tbody> 58 </table> 59 <input type="button" value="添加" onclick="ShowModel()"/> 60 </div> 61 62 <!--遮罩层--> 63 <div id="h1" class="c1 hide"></div> 64 65 <!--弹窗层--> 66 <div id="h2" class="c2 hide"> 67 <div style="230px;height:400px;margin: 50px auto"> 68 <p style="float: right;">IP：<input type="text" /></p> 69 <p style="float: right;">掩码：<input type="text" /></p> 70 <input style="margin-left: 60px;" type="button" value="确定" /> 71 <input style="margin-left: 20px;" type="button" value="取消" onclick="ModelClose();" /> 72 </div> 73 </div> 74 75 <!--实现点击触发弹窗及返回效果--> 76 <script> 77 function ShowModel() { 78 document.getElementById("h1").classList.remove("hide"); 79 document.getElementById("h2").classList.remove("hide"); 80 } 81 function ModelClose() { 82 document.getElementById("h1").classList.add("hide"); 83 document.getElementById("h2").classList.add("hide"); 84 } 85 </script> 86 </body> 87 </html>