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


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 相关文章推荐
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
React自定义hook的方法
Jun 25 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/10/09 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php单一接口的实现方法
2015/06/20 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
React快速入门教程
2017/01/17 Javascript
原生js实现轮播图
2017/02/27 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python调用命令行进度条的方法
2015/05/05 Python
python定时执行指定函数的方法
2015/05/27 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
关键字final的用法
2013/10/02 面试题
自荐信格式简述
2014/01/25 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
公务员群众路线心得体会
2014/11/03 职场文书