test

jquery.poptip.js

/**
 * 弹出式提示插件
 * 不支持 IE 6，部分支持 IE 7/8, 完全支持 Chrome/Firefox/IE 9
 *
 * @require jQuery
 */

(function ($, window, document) {
    var $last = null;
    var timer;
    $.poptip = function (options) {
        window.clearTimeout(timer);
        var domHtml, buttonHtml, $button, $dom, styleTag;
        var defaults = {
            position: 'center top',
            level: 'alert',
            html: '',
            stay: 0
        };
        options = $.extend(defaults, options);
        if ($last) {
            $dom = $last.children('.poptip__content').html(options.html).end();
        } else {
            styleTag = '<style>\
            .poptip{\
                background: rgba(222,0,0,0.5); position: fixed; top:0; width: 100%; text-align: center;\
                height:30px; line-height: 30px;  box-shadow: 0 1px 3px 0 #000; font-size:12px; color: #FFF;\
            }\
            .poptip a{\
                color:#33F;  margin: 0 0.3em;\
            }\
            .poptip__content{\
                display: inline-block;\
            }\
            .poptip__close{\
                float: right; margin-right: 10px; box-shadow:0 0 3px 0 #000; height: 20px; width: 20px;\
                line-height: 20px; margin-top:5px; border-radius:10px; background:#EEE; font-family:Arial; color:#666; \
                cursor: pointer;\
            }\
            </style>';
            domHtml = '<div class="poptip"><div class="poptip__content"></div></div>';
            buttonHtml = '<span title="关闭" class="poptip__close">x</span>';
            $button = $(buttonHtml).click(function () {
                $dom.remove();
                $last = null;
            });
            $dom = $(domHtml).append($button).children('.poptip__content').html(options.html).end();
            $('head').append($(styleTag));
            $('body').append($dom);
            $last = $dom;
        }
        if (options.stay > 0) {
            timer = window.setTimeout(function () {
                $dom.fadeOut({done: function () {
                    $dom.remove();
                    $last = null;
                }});
            }, options.stay);
        }
        return this;
    };
})(jQuery, window, document);