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

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

赞 (0)

相关推荐

  • javascript创建页面蒙板的一些知识技巧总结第1/3页

    在ajax大行其道的今天,模拟弹出窗口,或者thinkbox,greybox等很多特效都用了蒙板的功能,其应用原来对于我们来说也很简单:创建一个绝对定位,top/left都为0,宽度和高度等于浏览器内容的高宽,然后索引设置的大点即可.可是这里有一些问题和技巧可能是您一直都不知道或者不清楚的,这里总结几点,这些都是个人学习的过程中发现的. 1.创建的蒙板如果要禁止对蒙板下部内容的操作必须设置background属性且必须设置一个有效的值,否则虽然遮罩层创建成功,但仍然可以对页面下部的元素进行操作.

  • Android实现蒙板效果

    Android实现蒙板效果

    本文实例为大家分享了Android实现蒙板效果的相关代码,供大家参考,具体内容如下 1.不保留标题栏蒙板的实现 效果: 原理: 1.弹窗时,设置背景窗体的透明度 2.取消弹窗时,恢复背景窗体的透明度 关键代码: private void popupWindows(List<String> list){ //产生背景变暗效果 WindowManager.LayoutParams lp=getWindow().getAttributes(); lp.alpha = 0.4f; getWindow(

  • javascript 窗口加载蒙板 内嵌网页内容

    复制代码 代码如下: //初始化导航背景,iframe容器 function fnDaoHangBg() { var h = fnGetHeight(),w = fnGetWidth();//获取背景窗口大小 if(!$('divDaoHangBg')) { var div = $C('div');//创建背景蒙板 div.id = 'divDaoHangBg'; div.style.backgroundColor = 'black'; div.style.position = 'absolut

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

    蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明.maskLayer 在popWindow上面,用于显示蒙板的信息,比如"载入中--" 复制代码 代码如下: <html> <head> <style type="text/css"> .popWindow { background-color:#9D9D9D; width: 100%; height: 100%; left: 0; top: 0; fi

  • JS实现刷新父页面不弹出提示框的方法

    本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

  • JS弹出窗口插件zDialog简单用法示例

    本文实例讲述了JS弹出窗口插件zDialog简单用法.分享给大家供大家参考,具体如下: 因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm <script language="javascript" src="JS/zDialog/zDialog.js" type="text/javascript"></script> <script langua

  • 使用jQuery实现页面定时弹出广告效果

    使用jQuery实现页面定时弹出广告效果

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show()) 第六步:清除显示广告图片的定时操作 第七步:设置定时操作(隐藏广告图片的函数) 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide()) 第九步:清除隐藏广告图片的定时操作 <script

  • JS实现关闭当前页而不弹出提示框的方法

    本文实例讲述了JS实现关闭当前页而不弹出提示框的方法.分享给大家供大家参考,具体如下: 关闭当前页面,并且打开新页面(不提示) function closeWinAndOpen(url) { var sWinName = "LR"+parseInt(Math.random() * 100000000);//利用随机数处理WinName window.open(url,sWinName, 'toolbar=no,location=no,directories=no,status=yes,

  • JS实现点击登录弹出窗口同时背景色渐变动画效果

    本文实例讲述了JS实现点击登录弹出窗口同时背景色渐变动画效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <STYLE> #login{ position: relative; display: none;

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js点击任意区域弹出层消失实现代码

    本文实例为大家分享了js点击任意区域弹出层消失的具体代码,供大家参考,具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面,否则让弹出层消失. 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head

随机推荐