弹出窗口并且此窗口带有半透明的遮罩层效果


Posted in Javascript onMarch 13, 2014

本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此小姑。
代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
#fade { 
display:none; 
position:absolute; 
top:0%; 
left:0%; 
width:100%; 
height:100%; 
background-color:black; 
z-index:1001; 
-moz-opacity:0.8; 
opacity:.80; 
filter:alpha(opacity=80); 
} 
#light{ 
display:none; 
position:absolute; 
top:25%; 
left:25%; 
width:50%; 
height:50%; 
padding:16px; 
border:3px solid orange; 
background-color:white; 
z-index:1002; 
overflow:auto; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
var linkbt=document.getElementById("linkbt"); 
var light=document.getElementById('light'); 
var fade=document.getElementById('fade'); 
var closebt=document.getElementById("closebt"); 
linkbt.onclick=function(){ 
light.style.display='block'; 
fade.style.display='block'; 
} 
closebt.onclick=function(){ 
light.style.display='none'; 
fade.style.display='none'; 
} 
} 
</script> 
</head> 
<body> 
<a href="javascript:void(0)" id="linkbt"> 点击这里打开窗口</a> 
<div id="light"><a href="javascript:void(0)" id="closebt">关闭窗口</a></div> 
<div id="fade""></div> 
</body> 
</html>

以上代码实现了我们的要求,下面简单介绍一下它的实现过程。
一.实现原理:
在默认状态下,遮罩层和窗口都是隐藏不可见的,当点击链接之后,能够使窗口和遮罩层显示,并且将遮罩层设置为半透明状态。此两个元素都采用绝对定位同时设置居中窗口的z-index属性值大于遮罩层,这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候,能够将遮罩层和窗口隐藏,原理大致如此。
Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
javascript回车完美实现tab切换功能
Mar 13 #Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 #Javascript
JQuery中extend使用介绍
Mar 13 #Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 #Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 #Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 #Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 #Javascript
You might like
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
PHP提高编程效率的20个要点
2015/09/23 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
jQuery 选择器理解
2010/03/16 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
js密码强度校验
2015/11/10 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Python线程同步的实现代码
2018/10/03 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
网络工程专业毕业生推荐信
2013/10/28 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
讲座新闻稿
2015/07/18 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript