弹出窗口并且此窗口带有半透明的遮罩层效果
更新时间：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属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。
相关文章
这篇文章主要为大家详细介绍了两种简单的跨域方法，使用jsonp和php实现跨域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要为大家详细介绍了基于JavaScript定位当前的地理位置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
JavaScript中使用Object.create()创建对象介绍
这篇文章主要介绍了JavaScript中使用Object.create()创建对象介绍,本文先是讲解了语法,然后给出了创建实例,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了详解webpack es6 to es5支持配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本文通过几个简单的示例向大家展示了javascript封装cookie的注意事项及操作方法，非常的简单实用，最后附上一则具体实例，有需要的小火把可以参考下。2015-08-08
在javascript将NodeList作为Array数组处理的方法
在Web前端编程中，我们通常会通过document.getElementsByTagName的方法取出一组相同标签的dom元素。2010-07-07
document.all还是document.getElementsByName?
document.all还是document.getElementsByName?...2006-07-07
这篇文章主要为大家详细介绍了原生JS实现pc端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了详解http访问解析流程原理的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了js随机生成网页背景颜色的方法,涉及javascript操作背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
最新评论