弹出最简单的模式化遮罩层的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实现弹出最简单的模式化遮罩层

假设我们有一个容器container如下:        #container{width:auto;height:auto; overflow:hidden;}        /*这里的ov...
  • xubolqingqin
  • xubolqingqin
  • 2013年12月03日 22:54
  • 378

javascript超级简单的写出轮播图

本人小白一枚,刚刚学习JavaScript,发表也是为了督促自己学习,大家共勉。
  • xiaoLong2345
  • xiaoLong2345
  • 2016年11月04日 20:20
  • 635

简单滑动门js代码

代码如下学习点 立即调用的函数表达式 //使用立即调用的函数表答式,为了获得不同的i值 for(i=0;i...
  • chenshu0
  • chenshu0
  • 2016年11月28日 15:45
  • 165

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

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

JavaScript实现最简单的图片轮播

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

jsp弹出div带有遮罩层

点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; positio...
  • Elina_1992
  • Elina_1992
  • 2015年10月29日 16:04
  • 3845

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

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

点击按钮弹出遮罩层背景和居于屏幕中间的弹出窗口(结合阿聪世家适当修改)

遮罩层效果 兼容ie firefox jQuery遮罩层                     .mask{ display:none; position:absolute;top:0...
  • baidu_26764911
  • baidu_26764911
  • 2015年04月12日 20:05
  • 1525

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

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

js弹出半透明遮罩层,并显示注册文本框

                弹出提示            {margin:0;padding:0;font-size:12px;}       html,body {height:100%;wi...
  • lpz283929516
  • lpz283929516
  • 2010年03月01日 11:31
  • 2748
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:弹出最简单的模式化遮罩层的js代码
举报原因:
原因补充:

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