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. Mac上安装Grafana

    Mac上安装Grafana 一.背景 二.安装步骤 1.通过 Home Brew 安装 2.通过二进制包进行安装 1.下载 2.grafana配置文件的路径 3.修改grafana配置 1.修改默认的 ...

  2. 高斯消元de小板几

    感觉就是模拟解方程,还比手动解方程笨一些.... 但是大数据的话,他毕竟比我解得快多了.... 1 inline int Gauss(int n){ 2 int cnt=1;//真实到达的行列式行数 ...

  3. 洛谷 P3232 [HNOI2013]游走

    链接: P3232 题意: 和上次考试 T4 的简化且无修改一样,经典图上高斯消元求期望. 分析: 要求出每个点的期望出发次数 \(f_i\),每个点度数为 \(d_i\),有 \[f1=\sum\d ...

  4. reactnative实现qq聊天消息气泡拖拽消失效果

    前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...

  5. path-sum-ii leetcode C++

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  6. hdu 5092 Seam Carving （简单数塔DP，题没读懂，，不过可以分析样例）

    题意: 给一个m*n的矩阵,每格上有一个数. 找从第1行到第m行的一条路径,使得这条路径上的数之和最小. 路径必须满足相邻两行所选的两个数的纵坐标相邻(即一个格子必须是另一个格子的周围八个格子中的一个 ...

  7. C++中gSOAP的使用

    目录 SOAP简介 gSOAP 准备工作 头文件 构建客户端应用程序 生成soap源码 建立客户端项目 构建服务端应用程序 生成SOAP源码 建立服务端项目 打印报文 SOAP测试 项目源码 本文主要 ...

  8. 设计模式学习-使用go实现单例模式

    单例模式 定义 优点 缺点 适用范围 代码实现 懒汉模式 饿汉模式 双重检测 sync.Once 参考 单例模式 定义 什么是单例模式:保证一个类仅有一个实例,并提供一个全局访问它的全局访问点. 例如 ...

  9. Java第三天【变量、常量、数据类型】

    学习Java第三天!加油!请帖友看看有和不足的地方,和在下说一下,谢谢! 变量 变量(variable): 1.变量的本质就是代表"可操作的存储空间",空间位置是确定的,蛋里面放置 ...

  10. 设计模式二--模板方法Template method

    模式分类: 书籍推荐:重构-改善既有代码的设计 重构获得模式 设计模式:现代软件设计的特征是"需求的频繁变化".设计模式的要点是 "寻找变化点,然后在变化点处应用设计模式 ...