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


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 尚未实现错误解决办法
Nov 27 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
VUE项目实现主题切换的多种方法
Nov 26 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
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
网站编辑求职信
2013/10/17 职场文书
先进个人获奖感言
2014/01/24 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
仓库管理计划书
2014/05/04 职场文书
学校读书活动总结
2014/06/30 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
Java spring定时任务详解
2021/10/05 Java/Android