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三层界面显示的更多相关文章

  1. 有了门面，程序会更加体面！- pos软件基于三层架构 -09

    续上篇)        大鸟说道:“实际上没有学过设计模式去理解三层架构会有失偏颇的,毕竟分层是更高一级别的模式,所谓的架构模式.不过在程序中,有意识的遵循设计原则,却也可以有效的做出好的设计.”   ...

  2. 数往知来 三层架构 <十四>

    三层架构_1 一.三层 就是把程序的各个部分都分离,尽量的底耦合,做到分工明确.责任明确 第一层:Dal   数据访问层 第二层 :Bll  业务逻辑判断层 第三层: UI   界面显示层 比如说数据 ...

  3. JAVAEE企业级应用开发浅谈第二辑：MVC和三层架构

    上海尚学堂警句:一份信心,一份努力,一份成功:十分信心,十分努力,十分成功. Step1.情景概要 Hello,小伙伴们,昨天跟大家分享了JAVA EE 企业级应用开发中大家耳熟能详的概念-三层架构, ...

  4. 从MVC和三层架构说到SSH整合开发

    相信很多人都认同JavaWeb开发是遵从MVC开发模式的,遵从三层架构进行开发的,是的,大家都这么认同.但是相信大家都会有过这样一个疑问,if(MVC三层模式==三层架构思想)out.println( ...

  5. 三层结构与MVC

    实验室学弟突然又谈到了三层结构与MVC的话题,想想还是有必要整理一下这些个基本概念,且也纠正自己之前对二者的概念混淆,乃至将其错误思想指导于开发中. 关键词:三层结构(三层架构).MVC框架(思想). ...

  6. JavaWeb -学生信息管理实践（JDBC+web+三层架构+DBUtil构造思路）

    前言: 1 该程序使用动态web项目 2 该程序使用SQL server需导入对应包( 具体可看前篇----JDBC的使用) 3 三层架构思想: ①表示层 前台:jsp/html等 作为前台与用户交互 ...

  7. java：（九大内置对象，计算服务器访问次数，filter过滤器，MVC框架，MVC和三层架构的关系）

    1.九大内置对象: <%@ page language="java" import="java.util.*" pageEncoding="UT ...

  8. SSH和三层架构的MVC模式的对应关系

    1.MVC(Model-View-Controller)设计模式: 首先让我们了解下MVC(Model-View-Controller)的概念: MVC全名是Model View Controller ...

  9. 【JSP】el、jstl、MVC、三层架构

    JSP[Java Server Pages] [概念] java服务器页面 简化的servlet设计 html语法中扩展java 跨平台 JSP全名为Java Server Pages,中文名叫jav ...

随机推荐

  1. Spring Security Jwt Token 自动刷新

    token的自动刷新 一.功能需求 二.功能分析 1.token 的生成 2.token 的自动延长 3.系统资源的保护 4.用户如何传递 token 三.实现思路 1.生成 token 和 refr ...

  2. Noip模拟38 2021.8.13

    T1 a 跟入阵曲很像,但是忘记入阵曲这题的思路是什么了 这里再提一下,入阵曲是子矩阵和是$k$的倍数,这道题目是子矩阵和是在一段区间内$[L,R]$ 因为这道题$n$特别小,$m$较大,考虑复杂度为 ...

  3. Noip模拟16 2021.7.15

    题目真是越来越变态了 T1 Star Way To Heaven 首先,你要看出这是一个最小生成树的题(妙吧?) 为什么可以呢? 我们发现从两点连线的中点过是最优的,但是上下边界怎么办呢? 我们把上下 ...

  4. IPv6(诞生原因、数据报格式、与IPv4的不同、地址表现形式、基本地址类型、IPv6与IPv4的过渡策略)

    文章转自:https://blog.csdn.net/weixin_43914604/article/details/105297642 学习课程:<2019王道考研计算机网络> 学习目的 ...

  5. hdu 2473 Junk-Mail Filter（并查集）

    题意: N个邮件需要鉴别. 两种操作: 1. M X Y:X和Y是同一种邮件 2.S X:X被误判(意味着X要被它从属的那个集合"踢出去"而所有其它的邮件的关系保持不变) 问最后总 ...

  6. python 处理xml 数据

    1 import xml.sax 2 import xml.sax.handler 3 4 # python 处理xml 数据 类,将xml数据转化为字典 5 ''' 6 原数据:<?xml v ...

  7. Latex使用CJK包添加字体

    最近写论文时有个中文期刊提供的LaTeX模板使用CJK宏包,大致是这样的: \documentclass{article} \usepackage{CJK} \begin{document} \beg ...

  8. Cannot load module file xxx.iml的两种解决方法

    一. 一种是点击左上角File,然后点击Invalidate Caches / Restart...,弹出对话框再点击Invalidate and Restart等待工程重新加载,问题就解决了. 二. ...

  9. css 跑马灯加载特效

    css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  10. mysql根据条件决定是否插入数据

    这个问题其实分两个方面: 1.根据表的主键决定数据是否插入. 2.根据表的非主键决定是否插入. 假设有表DOC_INFO(医生表),联合主键HOS_ID(医院代码),DEPT_CODE(科室代码),D ...