点击弹出居中带有透明遮罩层窗口

代码如下:

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

 

转载于:https://www.cnblogs.com/momox/p/5090798.html