js實現遮罩層彈出框的方法，js遮罩層彈出

js實現遮罩層彈出框的方法，js遮罩層彈出

本文執行個體講述了js實現遮罩層彈出框的方法。分享給大家供大家參考。具體分析如下：

昨天公司網站需要彈窗提示一些資訊,要我在把彈窗的js代碼和彈窗視窗html寫在一起哪裡需要就調用

不說那麼多了,直接上代碼,感覺肯定會有相容問題,看到了請指出啊：

複製代碼 代碼如下:<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">內容</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);
    }
    //關閉按鈕事件
    function popupClose(el) {
        var blackBg = document.getElementById("blackBg");
        blackBg && document.body.removeChild(blackBg);
        el.parentNode.style.display = "none";
    }
    //自動關閉
    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);
    }
    /**
    *功能 : 彈窗資訊
    *參數1 : 提示資訊內容
    *參數2 : 提示資訊狀態預設0 為提示資訊,1為成功資訊
    *參數3 : 彈窗div的id,預設"H-dialog"
    *參數4 : 彈窗內容的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程式設計有所協助。