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


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 相关文章推荐
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
js实现的map方法示例代码
Jan 13 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
基本DOM节点操作
Jan 17 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
Webpack如何引入bootstrap的方法
Jun 17 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
Yii框架中memcache用法实例
2014/12/03 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
js实现日历的简单算法
2017/01/24 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python创建学生管理系统
2019/11/22 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
工作汇报开头与结尾怎么写
2014/11/08 职场文书
保研专家推荐信范文
2015/03/25 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python