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


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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
JavaScript实现切换多张图片
Jan 27 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
php图片验证码代码
2008/03/27 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP类型约束用法示例
2016/09/28 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python类的动态绑定实现原理
2020/03/21 Python
Python气泡提示与标签的实现
2020/04/01 Python
10个顶级Python实用库推荐
2021/03/04 Python
动态密码技术
2012/10/18 面试题
工作会议主持词
2014/03/17 职场文书
新品发布会主持词
2014/04/02 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
毕业论文致谢信
2015/05/14 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
详解Laravel制作API接口
2021/05/31 PHP
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript