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


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 showModalDialog,open取得父窗口的方法
Mar 10 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
webpack多页面开发实践
Dec 18 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
浅谈Python的异常处理
2016/06/19 Python
简单谈谈python的反射机制
2016/06/28 Python
Django开发中的日志输出的方法
2018/07/02 Python
python实现Virginia无密钥解密
2019/03/20 Python
python区块及区块链的开发详解
2019/07/03 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
行政专员的岗位职责
2014/03/10 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
mysql函数之截取字符串的实现
2022/08/14 MySQL