html实现弹框，并伴随遮罩层，且弹框居中

    本文介绍的内容主要实现的功能有，出现弹框，并且伴随遮罩层，且弹框一直居中。

html和js代码：

<div id="hidebg"></div>
    <div id="hidebox" onClick="hidebox();">
        <div>
            <p class="box-head">温馨提示</p>
            <div class="hidebox-hr"><hr/></div>
            <p class="box-textarea">您暂时没有查看权限，请联系客服获取权限哦～<p>
            <div class="boxbtn">
               <a class="clickbtn cancel" href="javascript:void(0);" onclick="hidebox();">取消</a>
               <a class="clickbtn confirm" href="javascript:void(0);" onclick="contact();">联系客服</a>
            </div>
        </div>
    </div>
<div><a href="javascript:void(0);"  onclick="showbox();"></div>

function showbox() //显示隐藏层和弹出层
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //显示隐藏层
hidebg.style.height=document.body.clientHeight+"px"; //设置隐藏层的高度为当前页面高度
document.getElementById("hidebox").style.display="block"; //显示弹出层
}
function hidebox() //去除隐藏层和弹出层
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
function contact(){
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
window.open("url");
}

　　css代码：

    

#hidebg { position:absolute;left:0px;top:0px;
    background-color:#000;
    width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    filter:alpha(opacity=60);  /*设置透明度为60%*/
    opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
    display:none; /* http://www.jb51.net */
    z-Index:2;
}
#hidebox { position:fixed;
           _position: absolute;
           margin:0;
           width:400px;
           height:192px;
           top:40%;
           left:40%;
           background-color:#fff;
           display:none;
           cursor:pointer;
           z-Index:3;
           text-align: center;

        }
#content {
          text-align:center;
          cursor:pointer;
          z-Index:1;
          }
.box-head{
     font-size: 18px;
     padding-top: 18px;
     padding-bottom: 10px;
}
.box-textarea{
    font-size: 14px;
    padding-top: 30px;
    padding-bottom: 32px;
}
.hidebox-hr{
    width: 384px;
    text-align: center;
    /* padding: 0; */
    padding-left: 8px;
}
.clickbtn{
    display: block;
    width: 107px;
    height: 33px;
    border-radius: 3px;
    font-size: 18px;
}
.cancel{
    background-color: #ededed;
    float: left;
    margin-left: 88px;
}
.confirm{
    background-color:#00aed8;
    color: #ffffff;
    float: left;
    margin-left: 22px;
}
.boxbtn{
    width: 100%;
    height: 33px;
    line-height: 33px;
}

　　   1.遮盖层只需要设置一个div让它铺满全页面，并且z-index 属性设置元素的堆叠顺序设置一下就可以。

         2.弹框始终居中需要设置position：fixed.  top:50%; left:50%; 

          _position:absolute;这句代码的意思是“位置：绝对定位”，也就是说元素的位置是相对于整个浏览器窗口的，而不是相对于父元素。一般要配合top、left属性使用。

 

           专为ie6设置。

         3.position:absolute; 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

          元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

        position:fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

       元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    4.document.body.clientWidth ==> BODY对象宽度
     document.body.clientHeight ==> BODY对象高度
     document.documentElement.clientWidth ==> 可见区域宽度
     document.documentElement.clientHeight ==> 可见区域高度