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


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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
JS字符串截取函数实例
Dec 27 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
vue自定义树状结构图的实现方法
Oct 18 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Prototype Template对象 学习
2009/07/19 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
JS实现简单日历特效
2020/01/03 Javascript
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python截取两个单词之间的内容方法
2018/12/25 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python定义一个Actor任务
2020/07/29 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
七一党日活动总结
2014/07/08 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
2014年护理部工作总结
2014/11/14 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
如何写好活动总结
2019/06/21 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis