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

ttx9n · 发表于 2014-3-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属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。

lsc54 · 发表于 2022-8-8 20:09:04

啊，数码撒飒飒飒飒

回复用户5 · 发表于 2022-11-5 01:57:16

儿童服务绯闻绯闻绯闻

ppwxcg · 发表于 2022-12-17 15:39:32

撒旦撒旦撒擦擦擦擦

回复用户5 · 发表于 2023-8-26 21:41:25

挺不错的东西

0vwrdf6 · 发表于 2023-8-28 02:28:24

额UI废物iuhfujewfiewnnfen

qzdhcgs · 发表于 2023-12-11 10:48:18

的谁vdvdsvdsvdsdsv

64000928 · 发表于 2024-3-8 10:34:12

我要金豆金豆金豆

3pjdk29w · 发表于 2024-6-16 22:16:23

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

白狐软件 · 发表于 2024-6-19 10:17:21

了乐趣了去了去了去了去了

账号		自动登录	找回密码
密码			立即注册

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

相关帖子