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


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 相关文章推荐
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
深入理解(function(){... })();
Aug 16 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
教你部署vue项目到docker
Apr 05 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
php4的session功能评述(三)
2006/10/09 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
对Python中class和instance以及self的用法详解
2019/06/26 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
食堂员工工作职责
2013/12/18 职场文书
村级换届选举方案
2014/05/10 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
微信搭讪开场白
2015/05/28 职场文书
污染环境建议书
2015/09/14 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL