分享一个提示框

/** * desc:提示框  alertLayer({text: '测试'}); * author:[e-mail] * 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