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>
相关文章
这篇文章主要介绍了file控件选择上传文件确定后触发了什么js事件,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了JavaScript移除数组内重复元素的方法,实例分析了javascript遍历数组及删除等操作的相关技巧,需要的朋友可以参考下2015-03-03
javascript函数报Uncaught ReferenceError: XXX is not define
本文主要介绍了javascript函数报Uncaught ReferenceError: XXX is not defined，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
本文为大家介绍下使用js是如何创建元素（节点）的，感兴趣的朋友不要错过2014-01-01
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
这篇文章主要给大家分享了完美兼容IE,chrome,ff的设为首页、收藏本站及保存到桌面js代码，有需要的小伙伴参考下。2014-12-12
这篇文章主要介绍了javascript 数组排序与对象排序的实例的相关资料,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了JS生成一维码(条形码)功能,结合完整实例形式分析了JS插件生成条形码的具体步骤与相关操作技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了深入分析javascript中的错误处理机制的相关资料,需要的朋友可以参考下2016-07-07
bootstrap弹出层有多种触发方式，以下是我用到的bootstrap的两种模态框方式，需要的的朋友参考下吧2017-05-05
bootstrap Table服务端处理分页(后台是.net)
这篇文章主要为大家详细介绍了bootstrap Table服务端处理分页，后台是.net，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论