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


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 刷新页面的代码小结 推荐
Apr 02 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
对python3 sort sorted 函数的应用详解
2019/06/27 Python
简单了解python中对象的取反运算符
2019/07/01 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
村委会换届选举方案
2014/05/03 职场文书
销售团队口号大全
2014/06/06 职场文书
校园安全标语
2014/06/07 职场文书
美术社团活动总结
2014/06/27 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
新闻人物通讯稿
2014/10/09 职场文书
教师节寄语2015
2015/03/23 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS