用js实现弹出最简单的模式化遮罩层

原创 2013年12月03日 22:54:19


假设我们有一个容器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>

接下来,就是用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>

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

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

css+js实现一个弹出层,完成注册功能 带有遮罩层,比较简单

根据网上的列子自己具体实现 首先看下HTML 代码,即要弹出的注册层代码: 放在 1. 2.正在注册关闭 3. 4.用户名 onfocus="this.style.border='1px...
  • newbird105
  • newbird105
  • 2015年04月01日 15:32
  • 1061

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

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

js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 #H-dialog{displ...
  • dyllove98
  • dyllove98
  • 2015年01月15日 13:40
  • 2165

JavaScript实现最简单的图片轮播

几行的代码实现最为简易的图片轮播效果。 Js部分 var li=document.get...
  • HeyWeCome
  • HeyWeCome
  • 2017年09月15日 22:09
  • 2025

原生js遮罩层

微信弹出遮罩          *{margin:0; padding:0;}     img{max-width: 100%; height: auto;}     .test{height: ...
  • echo_Ae
  • echo_Ae
  • 2017年06月16日 21:23
  • 223

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

需求:页面上有图片列表,排列显示产品小图片,希望点击时像QQ空间查看相片一样出一个遮罩层,显示大图出来。 分析: 1.需要一个小图点击事件,触发遮罩层的显示。 2.遮罩层默认隐藏,用绝对定位,完...
  • z20905547
  • z20905547
  • 2016年03月17日 01:28
  • 1132

js弹出层、遮罩、div层的几种效果

第一种:弹出层、遮罩层、div层 http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> http://www.w3.org/199...
  • xkm17
  • xkm17
  • 2013年05月06日 15:46
  • 1083

JS 弹出遮罩层,内部为DIV

.mainlist{padding:10px;} .mainlist div {margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weigh...
  • a5251199
  • a5251199
  • 2015年11月12日 11:36
  • 977

js-div遮罩层、div弹出层居中(遮罩层居中显示)

js-div遮罩层、div弹出层居中 转载自:http://www.blogjava.net/jimingminlovefly/articles/366989.html 思路:打开时,显示遮罩层S...
  • simaweier
  • simaweier
  • 2014年11月12日 17:10
  • 9060
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用js实现弹出最简单的模式化遮罩层
举报原因:
原因补充:

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