js與css實(shí)現(xiàn)彈出層覆蓋整個頁面的方法

    本文實(shí)例講述了js與css實(shí)現(xiàn)彈出層覆蓋整個頁面的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
    彈出層透明背景加框的常用樣式和結(jié)構(gòu)如下:
    代碼如下:
    .alertMessageBg{
    position:fixed;
    _position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:#000;
    opacity:0.5;
    -moz-opacity:0.5;
    filter:alpha(opacity=50);
    z-index:97;
    display:none;
    }
    .alertMessageDivBorder{
    position:fixed;
    _position:absolute;
    width:750px;
    height:370px;
    left:50%;
    top:50%;
    margin:-185px 0 0 -375px;
    background:#000;
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    opacity:0.3;
    z-index:98;
    display:none;
    }
    .alertMessageDiv{
    position:fixed;
    _position:absolute;
    width:730px;
    height:350px;
    left:50%;
    top:50%;
    margin:-175px 0 0 -365px;
    background:#fff;
    z-index:99;
    display:none;
    font-size:14px;
    }
    <div></div>
    <div></div>
    <div></div>
    彈出層背景覆蓋整個網(wǎng)頁的方法
    1.css方法
    代碼如下:
    .alertMessageBg{
    position:fixed;
    _position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:#000;
    opacity:0.5;
    -moz-opacity:0.5;
    filter:alpha(opacity=50);
    z-index:97;
    display:none;
    }
    2.js方法
    代碼如下:
    .alertMessageBg{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:#000;
    opacity:0.5;
    -moz-opacity:0.5;
    filter:alpha(opacity=50);
    z-index:97;
    display:none;
    }
    var bgWidth = document.body.clientWidth + 'px',
    bgHeight = document.body.clientHeight + 'px',
    alertBgNode = $('.alertMessageBg');
    alertBgNode.css({'width':bgWidth,'height':bgHeight});
    對比以上兩種方法，顯然css方法更省事，尤其在不用兼容ie6的現(xiàn)在。
    希望本文所述對大家基于JS的web程序設(shè)計(jì)有所幫助。