.toast { text-align: left; padding: 10px 0; background-color: #fff; border-radius: 4px; max-width: 350px; width: 350px; top: 0px; position: relative; box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2); margin-top: 6px; z-index: 99999; } .toast:before { content: \'\'; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .toast-icon { position: absolute; top: 50%; left: 22px; transform: translateY(-50%); width: 14px; height: 14px; padding: 7px; border-radius: 50%; display: inline-block; } .toast-title { font-size: 16px; color: #3e3e3e; font-weight: 700; margin-top: 0; margin-bottom: 8px; } .toast-message { font-size: 16px; margin-top: 0; margin-bottom: 0; color: #878787; } .toast-content { padding-left: 70px; padding-right: 60px; } .toast-close { position: absolute; right: 22px; top: 50%; width: 18px; cursor: pointer; height: 18px; fill: #878787; transform: translateY(-50%); background: url(close.png) no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .toast-close:hover { background-color: #dbdbdb; } .toast-success:before { background-color: #2BDE3F; } .toast-info:before { background-color: #1D72F3; } .toast-warn:before { background-color: #FFC007; } .toast-error:before { background-color: #d81e06; } .toast-icon-success { height: 32px; width: 32px; background: url(success.png) no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .toast-icon-info { height: 32px; width: 32px; background: url(info.png) no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .toast-icon-warn { height: 32px; width: 32px; background: url(warn.png) no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .toast-icon-error { height: 32px; width: 32px; background: url(error.png) no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; }
(function ($) { $.newGuid = function (separator) { if (separator === undefined) separator = "-"; if (separator == null) separator = ""; var section = function () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); }; return (section() + section() + separator + section() + separator + section() + separator + section() + separator + section() + section() + section()).toString(); }; $.easyuiext = { toastResult: function (result) { if (result.IsSuccess) { $.toast.success(result.Message); } else { $.toast.error(result.Message); } }, toastSuccess: function (content) { $.easyuiext.toastMessage({ type: "success", content: content }); }, toastInfo: function (content) { $.easyuiext.toastMessage({ type: "info", content: content }); }, toastWarn: function (content) { $.easyuiext.toastMessage({ type: "warn", content: content }); }, toastError: function (content) { $.easyuiext.toastMessage({ type: "error", content: content }); }, toastMessage: function (options) { options = $.extend({ id: $.newGuid(""), type: \'success\', title: \'提示\', className: \'success\', content: \'\', timeout: 2000 }, options || {}); options.className = switchType(options.type);//根据类型获取class名称 options.title = getTitle(options.type);//根据类型获取标题名称 options.timeout = getTimer(options.type); var html = \'<div id="\' + options.id + \'" class="toast toast-\' + options.className + \'" style="display:block;">\'; html += \'<div class="toast-icon toast-icon-\' + options.className + \'">\'; html += \'</div>\'; html += \'<div class="toast-content">\'; html += \'<p class="toast-title">\' + options.title + \'</p>\'; html += \'<p class="toast-message">\' + options.content + \'</p>\'; html += \'</div>\'; html += \'<div class="toast-close" onclick="$.easyuiext.removeToast(\\'\' + options.id + \'\\')">\'; html += \'</div>\'; html += \'</div>\'; $("body").append(html); var w = $(window).width(); var windowWidth = document.documentElement.clientWidth; var toastWidth = $("#" + options.id).width(); $("#" + options.id).css({ "left": (windowWidth - toastWidth) / 2 }).show().animate({ right: "1%" }, 500); options.timer = setTimeout(function () { $.easyuiext.removeToast(options.id); }, options.timeout);//定时关闭 $("#" + options.id).hover( function () { if (options.timer) { clearTimeout(options.timer); } }, function () { if (options.timeout > 0) { options.timer = setTimeout(function () { $.easyuiext.removeToast(options.id); }, options.timeout); } } ); function switchType(type) { if (type == "success" || type == "info" || type == "warn" || type == "error") { return type; } else { return "success"; } } function getTimer(type) { var timer = 2000; if (type == "success") { timer = 2000; } else if (type == "info") { timer = 3000; } else if (type == "warn") { timer = 4000; } else if (type == "error") { timer = 5000; } return timer; } function getTitle(type) { var title = "提示"; if (type == "success") { title = "提示"; } else if (type == "info") { title = "提示"; } else if (type == "warn") { title = "警告"; } else if (type == "error") { title = "错误"; } return title; } }, removeToast: function (toastId) { $("#" + toastId).remove();//移除toast消息 }, }; })(jQuery);
![](https://image.shishitao.com:8440/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2Jhbm5lci8yMDIxL3ZvbGNlbmdpbmUtYzIuanBn.jpg?w=700&webp=1)