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 ...
随机推荐
- java监控JVM的内存使用情况等
以下的程序监控参数的代码,有些是从网络上获取的,此处进行一个记录是为了以后如果要用到方便记录. 1.引入jar包,为了获取一些cpu的使用率等信息 <dependency> <gro ...
- stm32电机控制之控制两路直流电机
小车使用的电机是12v供电的直流电机,带编码器反馈,这样就可以采用闭环速度控制,这里电机使用PWM驱动,速度控制框图如下: 由以上框图可知,STM32通过定时器模块输出PWM波来控制两个直流电机的转动 ...
- oracle物化视图创建及删除
--删除物化表的日志表 DROP MATERIALIZED VIEW LOG ON 表名; --为将要创建物化视图的表添加带主键的日志表 CREATE MATERIALIZED VIEW LOG ON ...
- DDD领域驱动设计-项目包结构说明-Ⅳ
基于DDD领域驱动设计的思想,在开发具体系统时,需要先建立不同的层级包.主要是梳理不同层面(应用层,领域层,基础设施层,展示层)包括的功能目录,每一个层面应该包括哪些模块.本例所讲述的分层是DDD落 ...
- UVM：6.2.3 sequencer 的grab 操作
转载:UVM:6.2.3 sequencer 的grab 操作_tingtang13的博客-CSDN博客 1.grab 比lock 优先级更高. 2.lock 是插到sequencer 仲裁队列的后面 ...
- PyPi到底是什么？pypi有啥作用？PyPi和pip有何渊源？
转载:https://blog.csdn.net/weixin_42139375/article/details/82711201 可能有很多刚入行不久的朋友们,每天都在用pip 命令install ...
- 30分钟通过Kong实现.NET网关
什么是Kong Openrestry是一个基于Nginx与Lua的高性能平台,内部有大量的Lua库.其中ngx_lua_moudule使开发人员能使用Lua脚本调用Nginx模块.Kong是一个Ope ...
- HashSet的remove方法（一道面试题）
1 public class CollectionTest { 2 3 @Test 4 public void test3(){ 5 HashSet set = new HashSet(); 6 Pe ...
- 有关unsigned和有符号类型的区别
相信大家对于unsigned这个玩意并不陌生,但是有的时候却会被它搞懵,比如下面: #include<iostream> using std::cout; using std::cin; ...
- 使用BadBoy录制JMeter脚本
BadBoy简介 BadBoy是一款免费WEB自动化测试工具,其实就是一个浏览器模拟工具,具有录制和回放功能,支持对录制出来的脚本进行调试.同时支持捕获表单数据的功能,所以能够进行自动化测试.但目前 ...