弹出窗口并且此窗口带有半透明的遮罩层效果
更新时间：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属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。
相关文章
这篇文章主要介绍了JS赋值、浅拷贝和深拷贝,结合实例形式总结分析了JavaScript数组和对象的深浅拷贝相关概念、原理、操作技巧与使用注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了JavaScript获取用户所在城市及地理位置的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
这篇文章主要介绍了mock.js实现模拟生成假数据功能,结合实例形式分析了mock.js插件生成模拟数据的相关操作技巧,需要的朋友可以参考下2019-01-01
最近项目结束，很空闲，于是就试着仿照微信跳一跳写了一个极简版的游戏，到底简单到什么程度呢?大家可以参考下本文2018-01-01
这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了JavaScript前端中的设计模式，设计模式是一套被反复使用，多数人知晓的，经过分类编目的，代码设计经验的总结，感兴趣想要详细了解可以参考下文2023-05-05
这篇文章主要介绍了js中!和!!的区别与用法,js中!的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值，需要的朋友可以参考下2020-05-05
js特效,页面下雪的小例子，需要的朋友可以参考一下2013-06-06
前后端分离的项目中,前端工作人员会要求后端返回指定格式的JSON数据,下面这篇文章主要给大家介绍了关于如何根据后端返回的url下载json文件的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了小程序实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
最新评论