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 ==> 可見區域高度