HTML三层界面显示

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="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>
View Code

 

posted @ 2018-05-23 18:10  糕事情  阅读(476)  评论(0)  编辑  收藏  举报