弹出最简单的模式化遮罩层的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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
小程序实现列表倒计时功能
Jan 29 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 分页原理详解
2009/08/21 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
繁简字转换功能
2006/07/19 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js控制input输入字符解析
2013/12/27 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
laypage.js分页插件使用方法详解
2019/07/27 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python 可爱的大小写
2008/09/06 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python实现梯度下降法
2020/03/24 Python
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
施工资料员的岗位职责
2013/12/22 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
护林员个人总结
2015/03/04 职场文书
服务行业标语口号
2015/12/26 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
卖车协议书范文
2016/03/23 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python