覆盖alert对话框-自制Jquery.alert插件

Javascript 代码：

 

(function ($) {
    'use strict';

    window.alert = $.alert = function (msg) {
        var defaultOpts = {
            bodyClass: 'body-cover',
            mainClass: 'main-cover',
            alertClass: 'alert-cover'
        };

        var _body = $('body');//body
        var _wrap = $('<div></div>');//遮挡层
        var _coverCotent = $('<div><div class="alert-close"><i class="fa fa-close"></i></div><div class="content"></div></div>');
        _body.addClass(defaultOpts.bodyClass); //设置body效果
        _body.append(_wrap);//添加遮挡层
        _wrap.addClass(defaultOpts.mainClass);//遮挡层添加样式
        _body.append(_coverCotent);//添加遮挡内容层
        _coverCotent.addClass(defaultOpts.alertClass);////添加遮挡内容层样式
        _coverCotent.find('.content').text(msg);
        _coverCotent.fadeIn('500');

        //点击遮挡层
        _wrap.unbind().bind('click', function () {
            _close();
        });

        //点击关闭按钮
        $(_coverCotent.find('i')).unbind().bind('click', function () {
            _close();
        });

        var _close = function () {
            _coverCotent.fadeOut('300', function () {
                _body.removeClass(defaultOpts.bodyClass);//移除bodycover样式
                _wrap.remove();//遮挡层移除
                _coverCotent.remove();//遮挡内容层移除
            });            
        }

        //定时销毁
        setTimeout(_close, 10000);

    }

})(jQuery);

 

CSS 代码：

/*  cover body style */
.body-cover{overflow: hidden;}

/*  wrap style */
.main-cover{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #000;opacity: 0.8; filter: alpha(opacity=80);}

/*  cover content style */
.alert-cover{position: fixed; z-index:99999; width:400px;min-height: 120px;top: 50%; left: 50%; margin-top: -80px; border-radius: 6px;margin-left: -200px;border: 1px solid #eee;box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);background-color: white;display: none;}
.alert-cover .alert-close{height: 30px; text-align: right;cursor: pointer;padding-right: 10px;}
.alert-cover .content{text-align: center;}

 

效果：