手机
当前位置:查字典教程网 >编程开发 >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实现在页面上弹出蒙板技巧简单实用】相关文章:

js实现简单锁屏功能实例

纯javascript实现四方向文本无缝滚动效果

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

让文字在页面上90度,180度翻转

javascript实现十秒钟后注册按钮可点击的方法

jQuery实现转动随机数抽奖效果的方法

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

js实现异步循环实现代码

jquery插件splitScren实现页面分屏切换模板特效

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

精品推荐
分类导航