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. 《HelloGitHub》第 67 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweihan/HelloGitHu ...

  2. 编译qwt遇到的问题

    在windows下使用mingw编译从git上下载的qwt工程下的tests时一直提示一下错误: error: undefined reference to `qMain(int, char**)' ...

  3. Android WebView 实现文件选择、拍照、录制视频、录音

    原文地址:Android WebView 实现文件选择.拍照.录制视频.录音 | Stars-One的杂货小窝 Android中的WebView如果不进行相应的设置,H5页面的上传按钮是无法触发And ...

  4. Hello World之编译链接装载与执行（1）

    一:前言 我打算写一系列博客来说说我对Hello World在计算机中的生命旅程的理解,我是一名软件工程专业的大三学生,有关这个问题我主要的参考书有<深入理解计算机系统>.<现代操作 ...

  5. 【Python+postman接口自动化测试】（7）Postman 的使用教程

    Postman v6的使用 Postman: 简单方便的接口调试工具,便于分享和协作.具有接口调试,接口集管理,环境配置,参数化,断言,批量执行,录制接口,Mock Server, 接口文档,接口监控 ...

  6. [源码解析] PyTorch 分布式(2) ----- DataParallel(上)

    [源码解析] PyTorch 分布式(2) ----- DataParallel(上) 目录 [源码解析] PyTorch 分布式(2) ----- DataParallel(上) 0x00 摘要 0 ...

  7. PTA 7-3 Windows消息队列 (25分)

    PTA 7-3 Windows消息队列 (25分) 消息队列是Windows系统的基础.对于每个进程,系统维护一个消息队列.如果在进程中有特定事件发生,如点击鼠标.文字改变等,系统将把这个消息加到队列 ...

  8. 学习JS的第三天

    一.逻辑分支(续) 1.三目运算符:条件运算符 a>b?c:d;表达式1?表达式2:表达式3; 根据表达式1执行的结果,来决定执行表达式2还是表达式3 表达式1结果是true执行表达式2,最终返 ...

  9. ubuntu install redis

    ubuntu install redis apt-get update apt-get install redis-server redis-server --daemonize yes

  10. MarkDown学习内容总结

    MarkDown学习内容 标题 使用方法:通过 # 的个数实现多级标题. 举例如下: 一级标题格式为:# + 空格 + 标题名: 二级标题格式为:## + 空格 + 标题名: 三级标题格式为:### ...