首页 > 蚂蚁部落 > 正文

点击弹出居中带有透明遮罩层窗口
2017-12-27 09:19:47   来源:   评论:0 点击:

本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现

本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!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属性值大于遮罩层,这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候,能够将遮罩层和窗口隐藏,原理大致如此。

二.相关阅读:

1.透明度设置可以参阅CSS 透明度一章节。

2.z-index可以参阅CSS z-index属性一章节。

3.onclick事件可以参阅javascript click事件一章节。

相关热词搜索:

上一篇:js动态生成select下拉菜单
下一篇:js删除数组中的第一个元素

分享到: 收藏
评论排行