手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现在页面上弹出蒙板技巧简单实用
js实现在页面上弹出蒙板技巧简单实用
摘要:蒙板是两个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>

【js实现在页面上弹出蒙板技巧简单实用】相关文章:

基于JavaScript实现图片点击弹出窗口而不是保存

jQuery实现在列表的首行添加数据

JavaScript实现列表分页功能特效

js实现简单div拖拽功能实例

jQuery实现将页面上HTML标签换成另外标签的方法

javascript实现在网页任意处点左键弹出隐藏菜单的方法

jQuery实现自动滚动到页面顶端的方法

js实现异步循环实现代码

javascript实现简单的省市区三级联动

jquery实现弹出层效果实例

精品推荐
分类导航