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、spring boot中配置多数据源

    在项目开发的过程中,有时我们有这样的需求,需要去调用别的系统中的数据,那么这个时候系统中就存在多个数据源了,那么我们如何来解决程序在运行的过程中到底是使用的那个数据源呢? 假设我们系统中存在2个数据源 ...

  2. 三极管和MOS管驱动电路的正确用法

    1 三极管和MOS管的基本特性 三极管是电流控制电流器件,用基极电流的变化控制集电极电流的变化.有NPN型三极管(简称P型三极管)和PNP型三极管(简称N型三极管)两种,符号如下: MOS管是电压控制 ...

  3. RocketMQ源码详解 | Broker篇 · 其一：线程模型与接收链路

    概述 在上一节 RocketMQ源码详解 | Producer篇 · 其二:消息组成.发送链路 中,我们终于将消息发送出了 Producer,在短暂的 tcp 握手后,很快它就会进入目的 Broker ...

  4. linux tr

    转载:tr命令_Linux tr 命令用法详解:将字符进行替换压缩和删除 (linuxde.net) tr命令 文件过滤分割与合并 tr命令可以对来自标准输入的字符进行替换.压缩和删除.它可以将一组字 ...

  5. 平分的直线 牛客网 程序员面试金典 C++ Python

    平分的直线 牛客网 程序员面试金典 C++ Python 题目描述 在二维平面上,有两个正方形,请找出一条直线,能够将这两个正方形对半分.假定正方形的上下两条边与x轴平行. 给定两个vecotrA和B ...

  6. HTML 简单介绍

    1.什么是HTML > HTML是用来描述网页的一种语言 > HTML指的是超文本标记语言(Hyper Text Markup Language) > 标记语言是一套标记标签(mar ...

  7. springboot如何通过apollo动态去注册dubbo服务

    参考相关文章: apollo官方文档:  https://dubbo.apache.org/zh/docs/v2.7/user/configuration/configuration-load-pro ...

  8. offsetX各种值总结

    pageX: 页面X坐标位置 pageY: 页面Y坐标位置 screenX: 屏幕X坐标位置 screenY: 屏幕Y坐标位置 clientX: 鼠标的坐标到页面左侧的距离 clientY: 鼠标的坐 ...

  9. hudi clustering 数据聚集（三 zorder使用）

    目前最新的 hudi 版本为 0.9,暂时还不支持 zorder 功能,但 master 分支已经合入了(RFC-28),所以可以自己编译 master 分支,提前体验下 zorder 效果. 环境 ...

  10. python tkinter实现俄罗斯方块 基础版

    本项目最终效果见本人b站投稿av81480858 简介部分 本项目最终代码已上传github: https://github.com/BigShuang/Tetris 的1_BASIC文件夹 .其中1 ...