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 ...
随机推荐
- Python大数据应用
一.三国演义人物出场统计 先检查安装包 1.jieba库基本介绍 (1)jieba库概述 jieba是优秀的中文分词第三方库 中文文本需要通过分词获得单个的词语 jieba是优秀的中文分词第三方库,需 ...
- Go语言核心36讲（Go语言进阶技术十一）--学习笔记
17 | go语句及其执行规则(下) 知识扩展 问题 1:怎样才能让主 goroutine 等待其他 goroutine? 我刚才说过,一旦主 goroutine 中的代码执行完毕,当前的 Go 程序 ...
- Spring Cache 带你飞(一)
Spring 3.1 版本引入基于 annotation 的 cache 技术,提供了一套抽象的缓存实现方案,通过注解方式使用缓存,基于配置的方式灵活使用不同缓存组件.代码具有相当的灵活性和扩展性,本 ...
- 2021CCPC网络赛（重赛）题解
自己还是太菜了,五个小时一个题也没磕出来,还是队友牛逼!... Primality Test 先看这个题,可能一上去就被\(\frac{f(x)+f(f(x))}{2}\)向下取整吓住了,但仔细想想, ...
- Luogu P2081 [NOI2012]迷失游乐园 | 期望 DP 基环树
题目链接 基环树套路题.(然而各种错误调了好久233) 当$m=n-1$时,原图是一棵树. 先以任意点为根做$dp$,求出从每一个点出发,然后只往自己子树里走时路径的期望长度. 接着再把整棵树再扫一遍 ...
- no space left on device 磁盘空间不足
新挂载的目录,创建文件提示:no space left on device 1.执行命令:df -h ,查看盘是否挂载成功 2.用history命令查看历史命令,尴尬的发现挂载前忘记格式化了 3.取消 ...
- ReplacingMergeTree：实现Clickhouse数据更新
摘要:Clickhouse作为一个OLAP数据库,它对事务的支持非常有限.本文主要介绍通过ReplacingMergeTree来实现Clickhouse数据的更新.删除. 本文分享自华为云社区< ...
- swoole、swoft环境配置
一.服务器环境 1.lnmp wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz && tar zxf ...
- 【java+selenium3】模态框处理(五)
一.模态框的定义: 模态对话框(Modal Dialogue Box , 又叫做模式对话框),是指在用户想要对话框以外的应用程序进行操作时候,必须先对该对话框进行响应.如单击[确定]或者[返回]按钮等 ...
- python 函数的定义及调用语法，map 方法，函数嵌套递归
1.什么是函数 开发程序时候,需要代码执行多次,为了提高编写效率及代码重用性,所以把具有独立功能的代码块组织为一个小模块,给这个功能一个名称,这就是函数. 函数可以使用系统自带的函数也可以 ...