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


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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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
文件上传类
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
模拟select的代码
2011/10/19 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python脚本处理空格的方法
2016/08/08 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python urllib.request对象案例解析
2020/05/11 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
倡议书范文格式
2014/05/12 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
校长新学期致辞
2015/07/30 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫