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>HTML三层界面显示
原文地址：https://www.cnblogs.com/Caiyundo/p/9078276.html