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


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 第三章章节总结的例子
Mar 23 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 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截取中文字符串的问题
2006/07/12 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
js中开关变量使用实例
2017/02/24 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
中学教师教育感言
2014/02/21 职场文书
材料物理专业求职信
2014/09/01 职场文书
作风转变年心得体会
2014/10/22 职场文书
高三英语复习计划
2015/01/19 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
酒店温馨提示语
2015/07/14 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书