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


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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
javascript随机变色实例代码
Oct 15 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
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
php-fpm中max_children的配置
2019/03/15 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
js实现打字小游戏
2019/12/17 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
通过实例解析python and和or使用方法
2020/11/14 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
研究生自荐信
2013/10/09 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
赞助商致辞
2015/07/30 职场文书
小学数学国培研修日志
2015/11/13 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python