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. 无网络下，配置yum本地源

    1. 新建一个没有iso镜像文件的虚拟机: 2. 本地上传一个镜像文件(CentOS7的镜像),到虚拟机已创建的目录: 例如:上传一个镜像文件CentOS-7-x86_64-Everything-17 ...

  2. linux 蓝牙开发调试（rtl8821cs模块）

    刚调完rtl8821cs的wifi功能,项目需要打通蓝牙配网功能. 调试过程中遇到各种问题中间几乎放弃,倒腾了几天最后还是打通了,顺便记录下过程. 通信接口:SDIO @WiFi.Uart @BT;工 ...

  3. hdu 1754 I Hate It（单点更新，区段查最值）

    题意: N个成绩.M个操作. Q a b:查询第a个到第b个成绩中最高成绩 U a b:将第a个成绩改成b 思路: 看代码,, 代码: const int maxn = 200010; int max ...

  4. 第01课 OpenGL窗口（4）

    下面的代码处理所有的窗口消息.当我们注册好窗口类之后,程序跳转到这部分代码处理窗口消息. LRESULT CALLBACK WndProc( HWND hWnd, // 窗口的句柄 UINT uMsg ...

  5. 20191310李烨龙作业：MySort

    作业:MySort 任务详情 1. 用man sort 查看sort的帮助文档 2. sort常用选项有哪些,都有什么功能?提交相关使用的截图 3. 如果让你编写sort,你怎么实现?写出伪代码和相关 ...

  6. pycharm安装指导教程

    pycharm下载安装教程 1.pycharm下载官网 http://www.jetbrains.com/pycharm/ 2.下载好安装包后双击点开安装包文件,这边以专业版为例 按以上图片所示教程, ...

  7. Spark记录（二）：Spark程序的生命周期

    本文以Spark执行模式中最常见的集群模式为例,详细的描述一下Spark程序的生命周期(YARN作为集群管理器). 1.集群节点初始化 集群刚初始化的时候,或者之前的Spark任务完成之后,此时集群中 ...

  8. k8s入坑之路（3）containerd容器

    containerd概念: containerd主要是namebases与k8s docker不同 存放路径不一致 没有默认仓库 容器运行时: 2020年未kubernetes宣布不再支持docker ...

  9. RDD的详解、创建及其操作

    RDD的详解 RDD:弹性分布式数据集,是Spark中最基本的数据抽象,用来表示分布式集合,支持分布式操作! RDD的创建 RDD中的数据可以来源于2个地方:本地集合或外部数据源 RDD操作 分类 转 ...

  10. java读取大文件内容到Elasticsearch分析（手把手教你java处理超大csv文件）

    现在需要快算分析一个2g的csv文件: 基于掌握的知识,使用java按行读取文件,批量导入数据到es, 然后利用es强大的聚合能力分析数据,2个小时搞定! package com.example.de ...