用javascript为页面添加蒙版效果和弹出层

id为popWindow的div就是蒙版层，id为maskWindow的div是弹出层。

<html>
<head>
<style type="text/css">  .popWindow {  background-color:#9D9D9D;  width: 100%;  height: 100%;  left: 0;  top: 0;  filter: alpha(opacity=50);  opacity: 0.5;  z-index: 1;  position: absolute;  }  .maskLayer {  background-color:#000;  width: 200px;  height: 30px;  line-height: 30px;  left: 50%;  top: 50%;  color:#fff;  z-index: 2;  position: absolute;  text-align:center;  }
</style>
<script language="javascript" type="text/javascript">  function showDiv() {  document.getElementById('popWindow').style.display = 'block';  document.getElementById('maskLayer').style.display = 'block';        }  function closeDiv() {  document.getElementById('popWindow').style.display = 'none';  document.getElementById('maskLayer').style.display = 'none';  }
</script>
</head>
<body>  <div onclick="showDiv()" style="display:block; cursor:pointer">  弹出蒙板  </div>  <div id="popWindow" class="popWindow" style="display: none;">  </div>  <div id="maskLayer" class="maskLayer" style="display: none;">  <a href="#" onclick="closeDiv()"  style="cursor:pointer;text-decoration: none;">  关闭蒙板   </a>  </div>
</body>
</html>

用javascript为页面添加蒙版效果和弹出层相关推荐

html正方形对话框素材,10种展示效果的弹出层对话框插件method.js
一款10种展示效果的弹出层对话框插件method.js,可以点击演示页面的10个按钮分别查看不同的弹窗效果,基本上该有的弹窗特效都有了,喜欢的童鞋请收下吧. 查看演示下载资源: 68 次下载资源 ...
uni-app中同一个页面如何设置多个弹出层（弹框）
uni-app前端项目开发中,在使用uni-popup弹出层组件时,通常同一个页面要用到多个弹出层.提示窗口.提示框等等.那么怎么样注册多个弹出层而不冲突呢? 下面我以注册两个弹出层为例来说一下,注册 ...
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面移动端在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...
AlertBox 弹出层（信息提示框）效果
弹出层(弹窗)就是相对文档或窗口定位的一个层,一般用来显示提示信息.广告等内容,还可以配合覆盖层来锁定页面. 在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖 ...
java弹窗点击事件_[Java教程]jQuery的click事件在当前页弹出层窗口（不打开新页面）...
[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面) 0 2015-10-24 15:00:04 当给链接添加一个click事件,我们可能不希望Web浏览器按照其常规模式退出 ...
Js实现点击超链接弹出层，效果仿Discuz登录！
主要应用到的是dispaly:none 和 dispaly:block;来控制实现的: <a id="link" href="#" onclick=&qu ...
AJAX实现页面选项卡、隔行换色、弹出层功能代码
代码简介:AJAX实现页面选项卡.隔行换色.弹出层功能代码代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...
一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...

用javascript为页面添加蒙版效果和弹出层

用javascript为页面添加蒙版效果和弹出层

用javascript为页面添加蒙版效果和弹出层相关推荐

最新文章

热门文章