js实现在页面上弹出蒙板技巧简单实用
更新时间：2013年04月16日 17:46:03 作者：
蒙板是两个div，其中popWindow样式的div用于遮住整个页面并半透明，感兴趣的朋友可以参考下哈，希望对你学习js蒙版有所帮助
蒙板是两个div，其中popWindow样式的div用于遮住整个页面，并半透明。maskLayer 在popWindow上面，用于显示蒙板的信息，比如“载入中……“
<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>
复制代码 代码如下:
<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>
相关文章
下面小编就为大家带来一篇详谈构造函数加括号与不加括号的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了js实现仿Discuz文本框弹出层效果的方法,可实现点击文本框弹出窗口选择数据的效果,涉及鼠标事件及页面自定义弹出窗口的相关操作技巧,需要的朋友可以参考下2015-08-08
JavaScriptlocalStorage基本上是浏览器Window对象中的存储，您可以在中存储任何内容localStorage，localStorage及其相关的sessionStorage是 Web Storage API的一部分，我们将在本文详细了解这些,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Javascript promise异步编程，Promise 是异步编程的一种解决方案，可以替代传统的解决方案–回调函数和事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
深入理解JavaScript中为什么string可以拥有方法
下面小编就为大家带来一篇深入理解JavaScript中为什么string可以拥有方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05![对google个性主页的拖拽效果的js的完整注释[转]](//img.jbzj.com/images/xgimg/bcimg5.png)
对google个性主页的拖拽效果的js的完整注释[转]...2007-04-04
这篇文章主要介绍了vue+ts下对axios的封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
遇到一个Js从Cookies里面取值的需求，Js貌似没有现成的方法可以指定Key值获取Cookie里面对应的值，简单实现如下2014-06-06
当前，前端对二进制数据有许多的API可以使用，这丰富了前端对文件数据的处理能力，有了这些能力，就能够对图片等文件的数据进行各种处理。本文将着重介绍一些前端二进制数据处理相关的API知识，希望对大家有所帮助2023-02-02
JS通过识别id、value值对checkbox设置选中状态
最开始需要获取的是input value值设置checkbox选中状态，由于input value要使用计算业务，后来改造为id，这里就为大家分享一下实现代码,需要的朋友可以参考下2020-02-02
![对google个性主页的拖拽效果的js的完整注释[转]](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论