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


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方法
Jun 24 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python实现与redis交互操作详解
2020/04/21 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
北大自主招生自荐信
2013/10/19 职场文书
战友聚会邀请函
2014/01/18 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
公司奖励通知
2015/04/21 职场文书
撤诉状格式范本
2015/05/19 职场文书
培训班开班主持词
2015/07/02 职场文书
高中信息技术教学反思
2016/02/16 职场文书