实现效果:弹出一个窗口的时候,窗口后面的页面变暗,并且不能操作
难点:因为div层是不能把select控件遮住的,所以要特殊处理,方法两种,一种是在弹出窗口下面加一层iframe来遮住select;第二种是所以要在弹出的时候,先把select控件隐藏,这里选择第二种方法
实现原理:在页面上和弹出窗口中间加一个半透明的层,把页面的内容覆盖掉
主要代码:
<script language="javascript">
function Open()
{
//隐藏select控件
DispalySelect(0);
//显示遮罩层
document.getElementById("divPageMask").style.display="block";
//处理遮罩层
resizeMask();
window.onResize = resizeMask;
//显示弹出窗口
document.getElementById("divOpenWin").style.display="block";
}
function Close()
{
//显示select控件
DispalySelect(1);
//处理遮罩层
divPageMask.style.width = "0px";
divPageMask.style.height = "0px";
divOpenWin.style.display = "none";
window.onResize = null;
document.getElementById("divOpenWin").style.display="none";
}
//页面遮罩
function resizeMask()
{
divPageMask.style.width = document.body.scrollWidth;
divPageMask.style.height = document.body.scrollHeight;
divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2);
divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2);
}
function DispalySelect(val)
{ //显示和隐藏select控件
var dispalyType;
var arrdispalyType=["hidden","visible"];
var arrObjSelect=document.getElementsByTagName("select");
for (i=0;i<arrObjSelect.length;i++)
{
arrObjSelect[i].style.visibility=arrdispalyType[val];
}
}
</script>
下面是HTML例子
<style type="text/css">
.body,td{font-size:12px}
#divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}
#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px}
</style>
<div id="divPageMask"></div>//遮罩层
<div id="divOpenWin"><center><a href="javascript:Close();">关闭</a></center></div>//弹出层
<label></label>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td colspan="2" align="center" height="90"><p><img src="http://www.sopull.com/Images/Index/logo.gif" height="60" width="250"></p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td height="10" style="color:#666666;font-size:13px"> </td>
</tr>
</tbody>
</table>
</center>
<select><option>1<option>
<option>11<option>
<option>11<option>
</select>
<p align="center"> </p>
<p align="center"><a href="javascript:Open();">打开遮罩</a></p>
</tbody>
</table>
分享到:
相关推荐
class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写onclick事件无论这么写,点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
弹出有半透明遮罩的div层,可拖动。弹出层在窗口自适应居中,简单用div和li模拟下select的效果。
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
CSS+JavaScript 实现原理: 创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用...
iframe的div遮罩层(可遮罩select) 圆角遮罩层 很酷的遮罩 遮罩拖动演示 内弹登录样式 动态打开和关闭层 总共有50多种.....
100多行代码,实现正在加载提示框,iframe遮罩,ie6下可遮罩select下拉框,或者其他控件,代码量少,方法定义灵活。且还有简单的警告,错误,成功消息提示插件。支持自动调用回调函数。(与jQuery结合使用,效果更佳)...
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...
5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏),并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并...
想起ie6下,臭名昭著的select需要用iframe遮罩的bug,估计和上面的bug根由是一样的
5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏),并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并...
5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏),并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并...
接上文JavaScript简单实现弹出拖拽窗口(一)进行学习。 下面开始具体分析代码部分: 首先我们先确认下结构: 悬浮窗口:初始不可见。包括标题栏和内容栏,标题栏内有标题和关闭按钮。 遮罩层:初始不可见。...
这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹...
摘要:脚本资源,jQuery,AsyncBox,弹出窗口,jQuery插件 一款基于jQuery的超漂亮 ... 它内置有拖动器、可设置标题栏图标,可静止定位、动画效果、针对IE6下是否使用 iframe 遮住 select、遮罩层、加载器、按钮式文本等。
dialogTools是一个用于创建自定义对话框的小工具集,它自身不具备UI,但可以很方便的让你设计的层/表格实现可拖动位置、调节尺寸、跟随元素、设置锁屏遮罩。 应用范围如:标准对话框/弹出层、下拉菜单、webqq2多...
在前端的设计上,我并没有把功能分到多个页面,而是通过使用js的遮罩弹窗,在一个页面实现各种功能。本网站的核心功能是模拟电影票的购买。在这个网站的开发中,需要多次多次jQuery与Ajax。在座位布局图中,我使用了...
JSON遮罩 这是一种很小的语言,是用于选择JS对象的特定部分,隐藏/掩盖其余部分的引擎。 var mask = require ( 'json-mask' ) ; mask ( { p : { a : 1 , b : 2 } , z : 1 } , 'p/a,z' ) ; // {p: {a: 1}, z: 1} ...