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


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 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
vue如何解决循环引用组件报错的问题
Sep 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
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python实现多线程抓取妹子图
2015/08/08 Python
python学习之编写查询ip程序
2016/02/27 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
学校搬迁方案
2014/06/15 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
员工2014年度工作总结
2014/12/09 职场文书
导游欢迎词范文
2015/01/23 职场文书
2014年终个人总结报告
2015/03/09 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python