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


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 Code实现IE邮件转发新浪微博
Jul 03 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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语法(3)
2006/10/09 PHP
php 中include()与require()的对比
2006/10/09 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
Javascript模板技术
2007/04/27 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
js操作二进制数据方法
2018/03/03 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
解决python 文本过滤和清理问题
2019/08/28 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
某公司面试题
2012/03/05 面试题
什么是封装
2013/03/26 面试题
公司聘任书模板
2014/03/29 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
公司辞职信模板
2015/05/13 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android