编程 Javascript

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

Posted in Javascript onApril 16, 2013

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

json数据的列循环示例

Sep 06 Javascript

jquery中常用的SET和GET$(”#msg”).html循环介绍

Oct 09 Javascript

jQuery 无刷新分页实例代码

Nov 12 Javascript

两个数组去重的JS代码

Dec 04 Javascript

给angular加上动画效遇到的问题总结

Feb 17 Javascript

浅析jquery数组删除指定元素的方法:grep()

May 19 Javascript

微信小程序 Button 组件详解及简单实例

Jan 10 Javascript

浅谈Vue项目骨架屏注入实践

Aug 05 Javascript

vue中input的v-model清空操作

Sep 06 Javascript

node.js中process进程的概念和child_process子进程模块的使用方法示例

Feb 11 Javascript

angular8.5集成TinyMce5的使用和详细配置(推荐)

Nov 16 Javascript

vue中控制mock在开发环境使用,在生产环境禁用方式

Apr 06 Vue.js

主页面中的两个iframe实现鼠标拖动改变其大小

Apr 16 #Javascript

拖动table标题实现改变td的大小(css+js代码)

Apr 16 #Javascript

获取offsetTop和offsetLeft值的js代码(兼容)

Apr 16 #Javascript

jquery表格内容筛选实现思路及代码

Apr 16 #Javascript

js实现图片轮换效果代码

Apr 16 #Javascript

js相册效果代码(点击创建即可)

Apr 16 #Javascript

jQuery实现点击标题输入详细信息

Apr 16 #Javascript