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 ...
随机推荐
- dwr简单应用及一个反向ajax消息推送
由于项目中最近需要用到dwr实现一些功能,因此在网上和dwr官网上找了一些资料进行学习.在此记录一下.(此处实现简单的dwr应用和dwr消息反向推送) 一.引入dwr的包 <dependency ...
- PCIE笔记--PCIe错误定义与分类
转载地址:http://blog.chinaaet.com/justlxy/p/5100057782 前面的文章提到过,PCI总线中定义两个边带信号(PERR#和SERR#)来处理总线错误.其中PER ...
- heihei
adb shell screencap -p /sdcard/p1.pngadb pull /sdcard/p1.png c:\BaiduYunDownloadadb shell rm /sdcard ...
- 使用NLog把日志写入数据库并按天自动分表
前言 最近用Asp.net Core开发程序的时候 因为时间的关系,就没有过多的去关注日志方面的功能 都是直接用系统的ILogger先记录着,然后看日志的时候就先在命令行看日志 在开发阶段没有什么问题 ...
- shell 中的判断
一.if的基本语法: if [ command ];then 符合该条件执行的语句 elif [ command ];then 符合该条件执行的语句 else 符合该条件执行的语句 ...
- yum Multilib version problems
这两天在更新CentOS7系统时,出现了Multilib version problems错误,执行命令: # yum update 出现了的错误信息: .... ---> Package li ...
- ☕【Java技术指南】「序列化系列」深入挖掘FST快速序列化压缩内存的利器的特性和原理
FST的概念和定义 FST序列化全称是Fast Serialization Tool,它是对Java序列化的替换实现.既然前文中提到Java序列化的两点严重不足,在FST中得到了较大的改善,FST的特 ...
- Linux系统编程之进程控制（进程创建、终止、等待及替换）
进程创建 在上一节讲解进程概念时,我们提到fork函数是从已经存在的进程中创建一个新进程.那么,系统是如何创建一个新进程的呢?这就需要我们更深入的剖析fork函数. 1.1 fork函数的返回值 调用 ...
- 【Go语言学习笔记】为什么要选择Go语言
一门语言的兴起一定有他的原因,所谓天下苦Java久矣,Go的到来可以说很多后端开发的福音,尤其是在微服务.分布式这么火的今天,那么,他的优势到底是什么呢? 首先,我们需要现有后端语言的优势痛点: 其实 ...
- ONVIF协议客户端
前几天跟大家聊了一些关于ONVIF的一些基础知识,它的工作原理以及优势.今天安徽思蔷信息科技为带大家了解一下simpleonvif 百度云盘下载地址:链接:https://pan.baidu.com/ ...