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


Posted in Javascript onDecember 04, 2013

假设我们有一个容器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>
Javascript 相关文章推荐
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
JS重载实现方法分析
Dec 16 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
vue文件运行的方法教学
Feb 12 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 #Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 #Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 #Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 #Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 #Javascript
JavaScript执行顺序详细介绍
Dec 04 #Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 #Javascript
You might like
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
Flask之请求钩子的实现
2018/12/23 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
安全生产月活动总结
2014/05/04 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
红白喜事主持词
2015/07/06 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang