HTML三層界面顯示
阿新 • • 發佈：2018-05-23
show idt 表格 模態框 tle function AD auto type 
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 htmlView Code> 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="width: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>
HTML三層界面顯示