弹出窗口并且此窗口带有半透明的遮罩层效果
更新时间：2014年03月13日 17:59:27 作者：
这篇文章主要介绍了如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果,需要的朋友可以参考下
本章节介绍一下如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果，此效果在当下比较流行，当然还有更为复杂的实现方式，当然效果也更为绚丽，下面介绍的代码能够简单实现此小姑。
代码如下:
<!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属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。
代码如下:
复制代码 代码如下:
<!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属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。
相关文章
本文章来给各位同学收集一些在WEB前台开发中常用的一些控制表单操作函数，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家详细介绍了js实现日历的简单算法，用js写了一套日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了JS判断数组里是否有重复元素的方法,结合实例形式分析了javascript针对数组重复元素判断相关的遍历、排序、递归等相关操作技巧,需要的朋友可以参考下2019-05-05
网站一般都有访问量统计工具，比较高效实用的工具多种多样，这篇文章主要介绍了javascript精确统计网站访问量实例代码，感兴趣的小伙伴们可以参考一下2015-12-12
javascript appendChild,innerHTML,join性能比较代码
在实际应用中，应该避免直接用innerHTML，对于大量的字符连接运算，应该考虑先运算再输出。2009-08-08
这篇文章主要介绍了微信小程序实现提交input信息到后台的方法,结合实例形式分析了微信小程序提交input信息到后台相关事件响应与数据处理操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了js获取当月最后一天实例代码，有需要的朋友可以参考一下2013-11-11
HTML DOM (Document Object Model文档对象模型) DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件. DOM是以层次结构组织的节点或信息片断的集合.2009-04-04
这篇文章主要为大家详细介绍了原生js轮播特效，简单实用的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
ES6中的promise对象很早就听说过，据说是为了解决我们使用回调产生回调地狱的问题。今天小编就带领大家通过本文学习下es6中的promise，感兴趣的朋友跟随小编一起看看吧2018-11-11
最新评论