你的位置:首页 > Java教程

[Java教程]点击弹出居中带有透明遮罩层窗口

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

<!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如何设置div背景透明度且兼容性良好一章节。
2.z-index可以参阅CSS的z-index属性一章节。
3.onclick事件可以参阅javascript的onclick事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12001

更多内容可以参阅:http://www.softwhy.com/javascript/