弹出最简单的模式化遮罩层的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 相关文章推荐
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
JavaScript 闭包的使用场景
Sep 17 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+SqlServer实现分页显示
2006/10/09 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
JS中的作用域链
2017/03/01 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python函数形参用法实例分析
2015/08/04 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Django视图类型总结
2021/02/17 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
村优秀党员事迹材料
2014/01/15 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
js前端图片加载异常兜底方案
2022/06/21 Javascript