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


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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
AngularJS Module方法详解
Dec 08 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 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 七大优势分析
2009/06/23 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
JQuery 操作/获取table具体代码
2013/06/13 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
Vue非父子组件通信详解
2017/06/12 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python如何调用百度识图api
2020/09/29 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
德语专业求职信
2014/03/12 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
财务经理岗位职责
2015/01/31 职场文书
上诉状格式
2015/05/23 职场文书
离婚案件被告代理词
2015/05/23 职场文书
Python读写yaml文件
2022/03/20 Python