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


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 相关文章推荐
js里怎么取select标签里的值并修改
Dec 10 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
用JS实现的一个include函数
2007/07/21 Javascript
brook javascript框架介绍
2011/10/10 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
javascript数组的定义及操作实例
2019/11/10 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
如何查看python关键字
2021/01/17 Python
护理学专业推荐信
2013/12/03 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
小学班主任评语大全
2014/04/23 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
员工开除通知书
2015/04/25 职场文书
2015年项目工作总结
2015/04/29 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server