HTML三层界面显示
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三层界面显示的更多相关文章
- 有了门面，程序会更加体面！- pos软件基于三层架构 -09
续上篇) 大鸟说道:“实际上没有学过设计模式去理解三层架构会有失偏颇的,毕竟分层是更高一级别的模式,所谓的架构模式.不过在程序中,有意识的遵循设计原则,却也可以有效的做出好的设计.” ...
- 数往知来 三层架构 <十四>
三层架构_1 一.三层 就是把程序的各个部分都分离,尽量的底耦合,做到分工明确.责任明确 第一层:Dal 数据访问层 第二层 :Bll 业务逻辑判断层 第三层: UI 界面显示层 比如说数据 ...
- JAVAEE企业级应用开发浅谈第二辑：MVC和三层架构
上海尚学堂警句:一份信心,一份努力,一份成功:十分信心,十分努力,十分成功. Step1.情景概要 Hello,小伙伴们,昨天跟大家分享了JAVA EE 企业级应用开发中大家耳熟能详的概念-三层架构, ...
- 从MVC和三层架构说到SSH整合开发
相信很多人都认同JavaWeb开发是遵从MVC开发模式的,遵从三层架构进行开发的,是的,大家都这么认同.但是相信大家都会有过这样一个疑问,if(MVC三层模式==三层架构思想)out.println( ...
- 三层结构与MVC
实验室学弟突然又谈到了三层结构与MVC的话题,想想还是有必要整理一下这些个基本概念,且也纠正自己之前对二者的概念混淆,乃至将其错误思想指导于开发中. 关键词:三层结构(三层架构).MVC框架(思想). ...
- JavaWeb -学生信息管理实践（JDBC+web+三层架构+DBUtil构造思路）
前言: 1 该程序使用动态web项目 2 该程序使用SQL server需导入对应包( 具体可看前篇----JDBC的使用) 3 三层架构思想: ①表示层 前台:jsp/html等 作为前台与用户交互 ...
- java：（九大内置对象，计算服务器访问次数，filter过滤器，MVC框架，MVC和三层架构的关系）
1.九大内置对象: <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- SSH和三层架构的MVC模式的对应关系
1.MVC(Model-View-Controller)设计模式: 首先让我们了解下MVC(Model-View-Controller)的概念: MVC全名是Model View Controller ...
- 【JSP】el、jstl、MVC、三层架构
JSP[Java Server Pages] [概念] java服务器页面 简化的servlet设计 html语法中扩展java 跨平台 JSP全名为Java Server Pages,中文名叫jav ...
随机推荐
- 函数指针和qsort函数
1.函数指针的形式: 函数指针:int (*funcP) (int *a, int *b) 表示定义了一个funcP函数指针,指向了返回值为int类型,参数为int* 和int* 的函数 使用方式: ...
- 有了 HTTP 协议，为什么还需要 Websocket？
WebSocket 是一种基于 TCP 连接上进行全双工通信的协议,相对于 HTTP 这种非持久的协议来说,WebSocket 是一个持久化网络通信的协议. 它不仅可以实现客户端请求服务器,同时可以允 ...
- Jquery校验中国身份证号码是否正确
在项目中使用表单时经常会涉及到身份证号码是否正确的校验,下面看看应该中国二代身份证号码应该怎么用Jquery校验呢? 二代身份证校验码的计算方法 二代身份证由17位数字和一位校验码组成,那么校验方法是 ...
- cf14C Four Segments（计算几何）
题意: 给四个线段(两个端点的坐标). 判断这四个线段能否构成一个矩形.(矩形的四条边都平行于X轴或Y轴) 思路: 计算几何 代码: class Point{ public: int x,y; voi ...
- hdu 5170 GTY's math problem（水，，数学，，）
题意: 给a,b,c,d. 比较a^b和c^d的大小 思路: 比较log(a^b)和log(c^d)的大小 代码: int a,b,c,d; int main(){ while(scanf(" ...
- uni-app（Vue）中(picker)用联动（关联）选择以至于完成某些功能
如下图所示,在项目中需求是通过首先选择学生的专业,选好之后在每个专业下面选择对应的学期,每个学期有对应的学费,因此就需要联动选择来实现这一功能. 以下仅展示此功能主要代码: <div class ...
- Docker配置tomcat端口映射后无法访问（404）
1.配置tomcat端口映射 2.访问测试 3.修改webapps文件,webapps.dist是所需文件 4.虚拟机中重新访问 5.在主机也能访问成功(注意路径为虚拟机IP,不是localhost)
- Linux&C ——信号以及信号处理
linux信号的简单介绍 信号的捕捉和处理 信号处理函数的返回 信号的发送 信号的屏蔽 一:linux信号的简单介绍. 信号提供给我们一种异步处理事件的方法,由于进程之间彼此的地址空间是独立的,所以进 ...
- Django 中间件 详细总结
一.什么是中间件 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影 ...
- es添加index template
在kibana页面选择最下方的management--elasticsearch--Index Management--Index Management 选择create a template添加in ...