分享一個提示框

/**
 * desc:提示框  alertLayer({text: '測試'});
 * author:[email protected]
 * date:2016-06-13
 * */
function alertLayer(options) {
    var settings = $.extend({
        time: 3000,
        text: "請注意啦",
        msgClass: "popup_tips",
        alertType: "al_warn",
        Ismask: true,
        maskClass: "mask" /* 遮罩樣式class */
    }, options);

    if(!$("." + settings.msgClass).length) {
        var span = document.createElement("div");
        var popHtml = '<div class="popup_header">'
            +'<div class="popup_headtop clearfix"><i class="popup_headleft ficon fleft"></i><i class="popup_headmidlle fleft"></i><i class="popup_headright ficon fleft"></i></div>'
            +'<div class="popup_headcon"><a class="popup_close ficon fright" title="關閉"></a><span class="popup_title">溫馨提示</span></div>'
            +'</div>'
            +'<div class="popup_body">'
            +'<p class="popup_body_tips">'+ settings.text +'</p>'
            +'</div>'
            +'<div class="popup_tottom clearfix"><i class="popup_botleft ficon fleft"></i><i class="popup_botmiddle fleft"></i><i class="popup_botright ficon fleft"></i></div>';

        $(span).html(popHtml).addClass(settings.msgClass).appendTo("body");

        var windowWidth, windowHeight, popWidth, popHeight, top, left;
        windowWidth = $(window).width(); /* 窗口寬度 */
        windowHeight = $(window).height(); /* 窗口高度 */

        popWidth = $(span).width();
        popHeight = $(span).height();
        top = (windowHeight - popHeight) / 2;
        left = (windowWidth - popWidth) / 2;
        $(span).css({top: top + "px", left: left + "px", "z-index": "9992"}).fadeIn(400);
        if(settings.Ismask) {
            var div = document.createElement("div");
            $(div).addClass(settings.maskClass).appendTo("body").css({width: windowWidth + "px", height: $(document).height() + "px"});
            $(window).resize(function() {
                bodyWidth = $(document).width(); /* body寬度 */
                bodyHeight = $(document).height(); /* body高度 */
                $(div).css({width: bodyWidth + "px", height: bodyHeight + "px"});
            });

            $(window).scroll(function() {
                bodyWidth = $(document).width(); /* body寬度 */
                bodyHeight = $(document).height(); /* body高度 */
                $(div).css({width: bodyWidth + "px", height: bodyHeight + "px"})
            });
        }

        /*setTimeout(function() {
         $(span).fadeOut(400).remove();
         settings.Ismask ? $(div).remove() : '';
         }, settings.time);*/
        $(span).find(".popup_close").click(function(){
            $(span).fadeOut(400).remove();
            settings.Ismask ? $(div).remove() : '';
        });
    }
}

<pre name="code" class="css">/**彈窗樣式star*/
.fleft{ float:left; }
.fright{ float:right; }
.mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgb(0,0,0); opacity:.2; z-index: 1000; filter: Alpha(Opacity=20); }
.alertMsg{ display: block; padding: 30px; max-width: 450px; position: absolute; text-align: center; font-size: 14px; background: #fff; border-radius: 4px; z-index: 902; color: #f0271d; }
.ficon {
    background-image: url(../images/icons.png);
    background-repeat: no-repeat;
}
.popup, .popup_tips{ width: 462px; z-index: 999; position: fixed; }
.popup_header{ width:100%;  }
.popup_headtop, .popup_tottom{ width: 100%; height: 3px; }
.popup_headtop i, .popup_tottom i{ display: block; *display: inline; height: 3px; }
.popup_headleft{ width: 2px; background-position: -302px -62px; }
.popup_headmidlle{ width: 458px; background:#6397ea; }
.popup_headright{ width: 2px; background-position: -305px -62px; }
.popup_headcon{ height: 50px; padding:0 12px 0 18px; background:#6397ea; line-height: 48px; }
.popup_title{ font-size: 18px; color: #fff; }
.popup_close{ display: block; width: 27px; height: 26px; background-position: -169px -213px; margin-top: 11px; cursor: pointer; }
.popup_body{ padding: 30px; background: #fff; }
.popup_botleft{ width: 2px; background-position: -302px -66px; }
.popup_tottom .popup_botmiddle{ width: 458px; height: 2px; background: #fff; }
.popup_botright{ width: 2px; background-position: -305px -66px; }
.popup_body_tips{ width: 80%; margin:0 auto; height: 100px; padding-top: 20px; font-size: 16px; color: #3b3b3b; text-align: center; }
.popup_body_btnp{ text-align: center; margin:30px auto 0; }
.popup_btn{ display: inline-block; *display: inline; *zoom:1; width: 137px; height: 38px; line-height: 38px; text-align: center; background-position: 0 -248px; font-size: 18px; color: #fff; }
/**彈窗樣式end*/

希望大家多多交流，多多分享。qq：274501366