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


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 22 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
树结构之JavaScript
Jan 24 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
canvas红包照片实例分享
Feb 28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
Vue-Router的使用方法
Sep 05 Javascript
vue视图不更新情况详解
May 16 Javascript
基于JavaScript实现省市联动效果
Jun 22 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
Display SQL Server Login Mode
2007/06/21 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django日志模块logging的配置详解
2017/02/14 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python实现年会抽奖程序
2019/01/22 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Django组件content-type使用方法详解
2019/07/19 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Java多态性的定义以及类型
2014/09/16 面试题
在C#中如何实现多态
2014/07/02 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
工商管理专业学生的自我评价
2013/10/01 职场文书
产品促销活动策划书
2014/01/15 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
体育运动会广播稿
2014/10/05 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
JavaScript继承的三种方法实例
2021/05/12 Javascript