弹出最简单的模式化遮罩层的js代码

原创 2013年12月05日 14:02:37
弹出模式化遮罩层的方法有很多,在本文为大家介绍下使用js实现最简单的模式化遮罩层,具体如下,感兴趣的朋友不要错过
假设我们有一个容器container如下:
 代码如下:

<style type=”text/css”>
#container{width:auto;height:auto; overflow:hidden;}
/*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/
</style>
<div id=”container” >
</div>



现在要在网页中弹出一个div层,使在关闭弹出的div层之前不可操作container。
那么,我们首先需要定义出这个遮罩的div层如下:
 代码如下:

<div id=”continer”>
<!—只所以将遮罩层放到container里面
<divid=”shade” style=”width:1600px;height:900px;/*给遮罩层一个初始大小*/”>
<input name=”close” id=”close” value=”关闭”>
</div>
</div>
unity3d官网http://www.unitymanual.com/
接下来,就是用js来使遮罩层始终显示在屏幕上并不可操作遮罩层下面的内容,点击关闭按钮关闭遮罩层
 代码如下:

<script type=”text/javascript”>
$(function(){
//获取当前浏览器的内部宽和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//设置遮罩层的宽和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//设置关闭按钮居中显示
$("#close").css("margin-top",nHeight/2-50+"px");
//设置当浏览器大小改变时触发的事件
$(window).resize(function(){
//获取当前浏览器的内部宽和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//设置遮罩层的宽和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//设置关闭按钮居中显示
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//设置关闭按钮消除遮罩层
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//也可用纯js来写
Document.getElementById(“shade”).style…….;
//后面多说无益,如果有兴趣又实在不会写,可以和本人联系。
})
</script> 


相关文章推荐

js弹出遮罩层效果

  • 2013年11月19日 15:35
  • 13KB
  • 下载

【菜鸟手打js】@弹出遮罩层显示大图之四

调整目标:1.变更大图时,根据新图片宽高设置边距,保证图片能居中。 2.小伙伴表示下拉条太丑了,所以修改下大图交互方式,去掉下拉条,改为图片可拖拽。 3.样式随便搞搞。 首先,先把布局变下。 ...

JS弹出遮罩层

  • 2012年11月28日 21:16
  • 29KB
  • 下载

js实现弹出遮罩层

  • 2014年06月14日 11:01
  • 844B
  • 下载

html+css+js实现弹出框+遮罩层

最近看到好多童鞋都在找弹出框和遮罩层的实现。 先来说遮罩层是个神马? 其实就是你弹出个东西,然后其他地方变黑了一点。就像遮住了其他地方一样。 那么实现原理呢? 就是设置一个div,宽度,高度是屏幕...

jquery js css弹出居中的遮罩层

  • 2012年03月01日 14:19
  • 35KB
  • 下载

js弹出遮罩层

  • 2011年09月13日 17:10
  • 977KB
  • 下载

js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 #H-dialog{displ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:弹出最简单的模式化遮罩层的js代码
举报原因:
原因补充:

(最多只允许输入30个字)