点击弹出一个带有半透明遮罩的居中窗口

快乐打工仔 分类:实例代码

现在比较流行的一种效果就是点击一个地方能够弹出一个带有遮罩的居中窗口,当然用处多种多样的,下面就结合一个实例详细介绍一下如何实现此效果,代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" />
<head>
<title>点击弹出居中窗口-犀牛前端部落</title>
<style type="text/css"> 
.Div_Scroll 
{ 
  position:fixed; 
  margin:-10px; 
  visibility:hidden; 
  background-color:#808080; 
  opacity:0.6; 
  z-index:99; 
} 
.Div_Scroll_Content 
{ 
  position:relative; 
  margin-top:20%; 
  width:inherit; 
  height:inherit; 
} 
.Div_AlertWindow 
{ 
  margin:auto; 
  width:200px; 
  height:100px; 
  background-color:lightblue; 
  border:5px solid #f00; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function ()
{ 
  var alertWindow=$("alertParent"); 
  var Sure=$("Sure");
  var alertButton=$("alertButton");
  alertWindow.style.width=window.screen.availWidth+"px"; 
  alertWindow.style.height=window.screen.height+"px"; 
  Sure.onclick=function()
  { 
    alertWindow.style.visibility="hidden"; 
  } 
  alertButton.onclick=ShowAlert;
} 
function ShowAlert() 
{ 
  var alertWindow=$("alertParent"); 
  alertWindow.style.visibility="visible"; 
} 
$=function(id)
{ 
  return document.getElementById(id); 
} 
</script> 
</head> 
<body> 
<div id="alertParent" class="Div_Scroll"> 
  <div class="Div_Scroll_Content"> 
  <div id="AlertWindow" class="Div_AlertWindow"> 
    <input type="button" id="Sure" value="关闭窗口" /> 
  </div> 
</div> 
</div> 
<div> 
  <input id="alertButton" type="button" value="点击弹出窗口"/> 
</div> 
</body> 
</html>

以上代码实现了我们想要的效果,点击按钮可以弹出一个窗口,并且带有半透明的遮罩层,点击关闭按钮可以关闭此弹出窗口,下面就详细介绍一下次效果的实现过程。

一.实现原理:

在默认状态下,全屏的遮罩层和弹出框是隐藏不可见的,当点击按钮的时候遮罩层和弹出框都会出现,这样就形成了带有半透明的遮罩层弹出窗口效果,当点击弹出层的关闭按钮的时候,然后再隐藏弹出框和这这层。

二.代码注释:

说明:本注释为了浏览者阅读习惯不是按照代码行先后顺序。

1.$=function(id){},声明一个函数,此函数类似于jquery的id选择器,能够返回指定id属性值的对象。

2.window.onload=function(){},文档加载完毕后再去执行函数中的代码,可以防止无法获取对象的错误。

3.var alertWindow=$("alertParent"),获取id属性值为alertParent元素对象。

4.var Sure=$("Sure"),获取id属性值为Sure的对象。

5.var alertButton=$("alertButton"),获取属性值为alertButton对象。

6.alertWindow.style.width=window.screen.availWidth+"px",设置遮罩层的宽度为显示器的可用宽度。

7.alertWindow.style.height=window.screen.height+"px",设置遮罩层的高度为显示器的可用高度。

8.Sure.onclick=function(){},为关闭按钮注册事件处理函数。

9.alertWindow.style.visibility="hidden",将弹出框设置为隐藏。

10.alertButton.onclick=ShowAlert,为alertButton按钮注册事件处理函数。

11.function ShowAlert() {},用于显示遮罩层。

特别说明:

此代码有所缺陷,那就是弹出窗口是遮罩层的子元素,这个时候设置遮罩层的透明度会影响到弹出窗口的透明度,不过可以简单的改进一下就可以了,方式可以参阅如何设置div的透明度但是其中的文字不透明一章节。

点击弹出一个带有半透明遮罩的居中窗口,这样的场景在实际项目中还是用的比较多的,关于点击弹出一个带有半透明遮罩的居中窗口就介绍到这了。

点击弹出一个带有半透明遮罩的居中窗口属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容