這篇文章主要介紹了js實現(xiàn)遮罩層彈出框的方法,可實現(xiàn)對遮罩層彈出框的樣式定義、按鈕事件及相關(guān)功能的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    本文實例講述了js實現(xiàn)遮罩層彈出框的方法。分享給大家供大家參考。具體分析如下：
    昨天公司網(wǎng)站需要彈窗提示一些信息,要我在把彈窗的js代碼和彈窗窗口html寫在一起哪里需要就調(diào)用
    不說那么多了,直接上代碼,感覺肯定會有兼容問題,看到了請指出?。?BR>    代碼如下:
    <style>
    #h-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;}
    #h-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointer;}
    #h-dialog .title{height: 40px;padding-left:10px; font-size:20px; line-height:40px;}
    #h-dialog #msgcont{height:36px; margin: 30px 0 50px;padding-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../images/ui_alert.png) no-repeat 20px 50%;}
    </style>
    <div id=h-dialog>
    <a class=close onclick=popupclose(this)>×</a>
    <div class=title>提示</div>
    <div id=msgcont>內(nèi)容</div>
    </div>
    <script type=text/javascript>
    //鎖定背景屏幕
    function lockscreen() {
    var clienth = document.body.offsetheight; //body高度
    var clientw = document.body.offsetwidth; //body寬度
    var doch = document.body.scrollheight; //瀏覽器高度
    var docw = document.body.scrollwidth; //瀏覽器寬度
    var bgw = clientw > docw ? clientw : docw; //取有效寬
    var bgh = clienth > doch ? clienth : doch; //取有效高
    var blackbg = document.createelement(div);
    blackbg.id = blackbg;
    blackbg.style.position = absolute;
    blackbg.style.zindex = 99999;
    blackbg.style.top = 0;
    blackbg.style.left = 0;
    blackbg.style.width = bgw+px;
    blackbg.style.height = bgh+px;
    blackbg.style.opacity = 0.4;
    blackbg.style.backgroundcolor = #333;
    document.body.appendchild(blackbg);
    }
    //關(guān)閉按鈕事件
    function popupclose(el) {
    var blackbg = document.getelementbyid(blackbg);
    blackbg && document.body.removechild(blackbg);
    el.parentnode.style.display = none;
    }
    //自動關(guān)閉
    function autoclose(id) {
    id = id || h-dialog;
    var blackbg = document.getelementbyid(blackbg);
    var objdiv = document.getelementbyid(id);
    settimeout(function(){
    blackbg && document.body.removechild(blackbg);
    objdiv.style.display = none;
    },2000);
    }
    /**
    *功能 : 彈窗信息
    *參數(shù)1 : 提示信息內(nèi)容
    *參數(shù)2 : 提示信息狀態(tài)默認0 為提示信息,1為成功信息
    *參數(shù)3 : 彈窗div的id,默認h-dialog
    *參數(shù)4 : 彈窗內(nèi)容的id,默認msgcont
    **/
    function showmsg(msg) {
    msg = msg || 請重新操作;
    var status = arguments[1] || 0,
    popupid = arguments[2] || h-dialog,
    contentid = arguments[3] || msgcont;
    lockscreen();
    //屏幕實際高寬
    var pagewidth = window.innerwidth;
    var pageheight = window.innerheight;
    if (typeof pagewidth != number) {
    if (document.compatmode == css1compat) {
    pagewidth = document.documentelement.clientwidth;
    pageheight = document.documentelement.clientheight;
    } else {
    pagewidth = document.body.clientwidth;
    pageheight = document.body.clientheight;
    }
    }
    //滾動條高寬
    var scrollleft = window.document.documentelement.scrollleft;
    var scrolltop = 0;
    if (typeof window.pageyoffset != 'undefined') {
    scrolltop = window.pageyoffset;
    } else if (typeof window.document.compatmode != 'undefined' &&
    window.document.compatmode != 'backcompat') {
    scrolltop = window.document.documentelement.scrolltop;
    } else if (typeof window.document.body != 'undefined') {
    scrolltop = window.document.body.scrolltop;
    }
    var div_x = (pagewidth - 400) / 2 + scrollleft;
    var div_y = (pageheight - 200) / 2 + scrolltop;
    var objdiv = document.getelementbyid(popupid);
    if (status) {
    document.getelementbyid(contentid).style.background = url($root/assets/images/ui_success.png) no-repeat 20px 50%;
    }
    document.getelementbyid(contentid).innerhtml = msg;
    objdiv.style.display = block;
    objdiv.style.left = div_x + px;
    objdiv.style.top = div_y + px;
    autoclose(popupid);
    }
    </script>
    希望本文所述對大家的javascript程序設(shè)計有所幫助。