js实现在页面上弹出蒙板技巧简单实用
js实现在页面上弹出蒙板技巧简单实用
发布时间:2016-12-30 来源:查字典编辑
摘要:蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明。maskLayer在popWindow上面,用于显示蒙板的信...

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

弹出蒙板

</div>

<div id="popWindow">

</div>

<div id="maskLayer">

<a href="#">

关闭蒙板

</a>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类