文档章节

JS+CSS简单实现DIV遮罩层显示隐藏

bengozhong
 bengozhong
发布于 2016/09/20 11:41
字数 295
阅读 7
收藏 0

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>DIV CSS遮罩层</title>
5 <script language="javascript" type="text/javascript">
6 function showdiv() {
7 document.getElementById("bg").style.display ="block";
8 document.getElementById("show").style.display ="block";
9 }
10 function hidediv() {
11 document.getElementById("bg").style.display ='none';
12 document.getElementById("show").style.display ='none';
13 }
14 </script>
15 <style type="text/css">
16 #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
17 #show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
18 </style>
19 </head>
20 <body>
21 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
22 <div id="bg"></div>
23 <div id="show">测试
24 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
25 </div>
26 </body>
27 </html>

复制代码

Copy上面的代码到HTML页面即可查看效果。

原理比较简单,就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时,通过JS去控制两个DIV的样式:display='block' or display='none'.就可以实现DIV的显示和隐藏。

注意两个DIV的z-index,显示在最上面的DIV的z-index一定要比遮罩层的z-index大

© 著作权归作者所有

共有 人打赏支持
bengozhong
粉丝 19
博文 476
码字总数 485469
作品 0
深圳
程序员
私信 提问
小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法

最近做的一个小程序需求,其中一个页面使用到了 这个小程序组件,然后点击页面上的某个元素,会触发页面弹起一个弹窗,这时发现 的 文字或者输入的文字内容,会直接穿透遮罩层和浮动弹窗,显...

清夜
2018/08/08
0
0
JS实现遮罩层

用JS实现一个常见的遮罩层,该遮罩层包含三部分(触发按钮,透明遮罩层,弹出对话层),并分解各部分(分为HTML,CSS,JavaScript),逐一讲解实现的机理。最终效果如下图: HTML结构 一个用来触...

MangoGan
2017/11/24
0
0
原生JS实现类似《掘金》网站的图片查看器

经常看掘金网站发现他的图片预览挺不错的,跟以前的 fancyBox 插件效果差不多。在这里我为大家提供一些编写思路。 记录页面的图片所在位置offsetTop / offsetLeft / width /height。 创建div...

jinzhe
2018/05/15
0
0
放大器实现

经常逛某宝可以发现,查看商品时都有如下的放大功能,鼠标放到图片上可以看到图片的细节,那么它是如何实现的呢?是真的将图片放大了吗?这篇文章就是讲述这个放大器是如何实现的。 原理 放大...

Nicksonlvqq
2017/12/06
0
0
HTML5+CSS3+jQuery实现弹出层

文章来源于helloweba.com 一个基本的弹出层应该满足以下需求: 点击按钮/链接触发弹出层,弹出层应该有半透明的遮罩层; 点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层; 使用E...

phala
2016/07/27
32
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue.js开发环境搭建说明(mac)

vue开发环境搭建(mac) 投影放大:cmd + + 安装Node 下载Node 官网下载 https://nodejs.org/en/download/ 安装Node 双击安装包,选择安装目录,比如: /usr/local/bin 安装成功后最好记录一...

Danni3
18分钟前
2
0
Qt编写自定义控件3-速度仪表盘

前言 速度仪表盘,写作之初的本意是用来展示当前测试的网速用的,三色圆环+数码管显示当前速度,Qt自带了数码管控件QLCDNumber,直接集成即可,同时还带有动画功能,其实也可以用在汽车+工业...

飞扬青云
24分钟前
1
0
【论文阅读】Image Super-Resolution via Deep Recursive Residual Network

题目:通过深度递归残差网络实现图像的超分辨率 摘要: 近年来,基于卷积神经网络的模型在单张图像的超分辨率上已经取得了巨大的成功。由于深度网络的强大,这些CNN模型学习了从低分辨率输入...

云烟成雨forever
26分钟前
2
0
为什么强烈建议大家使用枚举来实现单例

关于单例模式,我的博客中有很多文章介绍过。作为23种设计模式中最为常用的设计模式,单例模式并没有想象的那么简单。因为在设计单例的时候要考虑很多问题,比如线程安全问题、序列化对单例的...

群星纪元
45分钟前
11
0
Confluence 6 超过当前许可证期限进行升级

这个页面将会对你在进行 Confluence 升级的时候超过了当前许可证的期限进行升级的情况。 许可证警告 在升级的过程中,你将会在 Confluence 的应用程序日志(log file)中看到类似下面的错误提...

honeymoose
57分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部