HTML三层界面显示
2024-09-01 22:53:31
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>
最新文章
- 使用Flexible适配移动端html页面 - demo记录
- [转]MySQL innodb buffer pool
- Ubuntu下安装配置JDK1.7
- IDEA 回滚SVN更新内容
- 25个增强iOS应用程序性能的提示和技巧(高级篇)(2)
- js控制input type=checkbox 的勾选
- Logstash conf.d 多个配置文件
- redhat 6 配置 yum 源的两种方法
- 【转】cocos2d-x 模仿计时器效果，动态增加分数——2013-08-25 16
- 怎么在我们的App中集成条码扫描功能？
- 在vim里每行增加//注释
- PHP 手册
- CF848C:Goodbye Souvenir(CDQ分治)
- 将日期或数据转换为char数据类型 TO_CHAR(x[[,c2],C3])
- Amazon
- Exchanger的使用
- C#文件下载（实现断点续传）
- Css3不透明
- InsertionSort 直接插入排序（java）
- [转帖]Beyond Compare如何进行二进制比较