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;}
效果:
时间: 2024-10-24 16:04:01