自定義提示信息彈出層

 自定義彈出層示例：

標題： 內容： 自動關閉時間：

///自定義彈出層   alertTitle：彈出層標題      alertContent：彈出層內容    autoCloseSecond：彈出層默認自動關閉時間,默認3秒     contaierId：彈出層所在容易的ID,默認爲body
jQuery.extend({
    showAlertBox: function (alertTitle, alertContent, autoCloseSecond, contaierId) {
        stopTime(); //中止自動關閉彈出層的方法
        $("#alterBox").remove();  //移除已存在的彈出層
        if (contaierId == "" || contaierId == undefined || contaierId == null) contaierId = "body";
        if (alertTitle == "" || alertTitle == undefined || alertTitle == null) alertTitle = "提示信息";
        if (alertContent == "" || alertContent == undefined || alertContent == null) alertContent = "提示信息";
        if (autoCloseSecond == "" || autoCloseSecond == undefined || autoCloseSecond == null || isNaN(autoCloseSecond) || parseInt(autoCloseSecond) < 2) autoCloseSecond = 3;
        var strAlertBoxHtml = "<div id='alterBox' class='lightbox' style='width: 180px; background: #FFFFFF; border: 1px solid #ccc;line-height: 25px; z-index: 1001; display: block; position: absolute; top: 40%;left: 50%; margin-left: 0px; margin-top: 0px; display: none;'>";
        strAlertBoxHtml += "<dl style='display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em;-webkit-margin-start: 0px; -webkit-margin-end: 0px; margin-top:0px;'>";
        strAlertBoxHtml += "<dt id='idBoxHead' style='height: 18px;background: #f4f4f4;padding: 5px;'><strong>" + alertTitle + "</strong>";
        strAlertBoxHtml += "<strong id='alertClose' style='float: right;padding-right: 7px; cursor: pointer; font-size:14px;'>X</strong> </dt>";
        strAlertBoxHtml += "<dd id='ddContent' style='text-align: center; height: 45px;'>" + alertContent + "</dd></dl></div>";

        if (contaierId == "body") {
            $(contaierId).append(strAlertBoxHtml);
        } else {
            $("#" + contaierId).append(strAlertBoxHtml);
        }

        //***********************彈出層顯示位置  start
        var containerWidth = 0; //容器可用區域寬度
        var containerHeight = 0; //容器可用區域高度
        if (contaierId == "body") {
            containerWidth = window.screen.availWidth; //容器可用區域寬度
            containerHeight = window.screen.availHeight; //容器可用區域高度
        } else {
            containerWidth = $("#" + contaierId).width();
            containerHeight = $("#" + contaierId).height();
            if (containerWidth <= 180 || containerHeight < 45) {  //若是容器的大小小於彈出層的大小，自動以body做爲容器
                containerWidth = window.screen.availWidth;
                containerHeight = window.screen.availHeight;
                contaierId = "body";
                $("#alterBox").remove();
                $(contaierId).append(strAlertBoxHtml);
            }
        }
        var marginLeft = 0;  //彈出層距左邊邊距
        var marginTop = 0;  //彈出層距上邊邊距
        marginLeft = (parseInt(containerWidth) / 2) - 90;
        marginTop = (parseInt(containerHeight) / 2) - 50;
        $("#alterBox").css({ "left": marginLeft, "top": marginTop });
        //***********************彈出層顯示位置  end

        $("#alterBox").show(); //顯示彈出層
        $("#alertClose").click(function () { $("#alterBox").remove(); }); //關閉彈出層事件

        //*************************自動關閉彈出層 start
        getRTime(parseInt(autoCloseSecond));
        var setTime;
        function getRTime(m) {  //倒計時
            m--;
            if (m < 1) {
                stopTime();
                $("#alterBox").remove();
                return false;
            }
            setTime = setTimeout(function () { getRTime(m); }, 1000);
        }
        function stopTime()//中止以前的倒計時
        {
            clearTimeout(setTime);  //中止以前的倒計時
        }
        //*************************自動關閉彈出層 end
    }
});

其餘地方引用示例：

$.showAlertBox("提示","這裏是提示信息!",5,"contains_Id");   //彈出層在 id=「contains_Id」的容器中顯示，若是該參數爲空，則在body中顯示，5秒後自動關閉彈出層