弹出最简单的模式化遮罩层的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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
Javascript 继承机制实例
Aug 12 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
vue debug 二种方法
2018/09/16 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
干部考察材料范文
2014/12/24 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android