您的位置：首页 > Web前端 > JavaScript

js实现在页面上弹出蒙板技巧简单实用

2013-04-16 00:00 666 查看

蒙板是两个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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航