使用$.messager.defaults重写默认值对象。
消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。
* jQuery EasyUI 1.3.2
*翻译 ：qq
(function ($) {
function show(el, type, speed, timeout) {
var win = $(el).window("window");
if (!win) {
switch (type) {
case null:
win.show();
case "slide":
win.slideDown(speed);
case "fade":
win.fadeIn(speed);
case "show":
win.show(speed);
var timer = null;
if (timeout & 0) {
timer = setTimeout(function () {
hide(el, type, speed);
}, timeout);
win.hover(function () {
if (timer) {
clearTimeout(timer);
}, function () {
if (timeout & 0) {
timer = setTimeout(function () {
hide(el, type, speed);
}, timeout);
function hide(el, type, speed) {
if (el.locked == true) {
el.locked = true;
var win = $(el).window("window");
if (!win) {
switch (type) {
case null:
win.hide();
case "slide":
win.slideUp(speed);
case "fade":
win.fadeOut(speed);
case "show":
win.hide(speed);
setTimeout(function () {
$(el).window("destroy");
}, speed);
//在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象：
//showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
//showSpeed：定义窗口显示的过度时间。默认：600毫秒。
//width：定义消息窗口的宽度。默认：250px。
//height：定义消息窗口的高度。默认：100px。
//title：在头部面板显示的标题文本。
//msg：显示的消息文本。
//style：定义消息窗体的自定义样式。
//timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒
function _showMassager(_c) {
var options = $.extend({}, $.fn.window.defaults, {
collapsible: false,
minimizable: false,
maximizable: false,
shadow: false,
draggable: false,
resizable: false,
closed: true,
zIndex: $.fn.window.defaults.zIndex++,
bottom: -document.body.scrollTop - document.documentElement.scrollTop
onBeforeOpen: function () {
show(this, options.showType, options.showSpeed, options.timeout);
return false;
onBeforeClose: function () {
hide(this, options.showType, options.showSpeed);
return false;
title: "",
width: 250,
height: 100,
showType: "slide",
showSpeed: 600,
timeout: 4000
options.style.zIndex = $.fn.window.defaults.zIndex++;
var body = $("&div class=\"messager-body\"&&/div&").html(options.msg).appendTo("body");
body.window(options);
body.window("window").css(options.style);
body.window("open");
//创建对话框
function createDialog(title, content, buttons) {
var win = $("&div class=\"messager-body\"&&/div&").appendTo("body");
win.append(content);
if (buttons) {
var tb = $("&div class=\"messager-button\"&&/div&").appendTo(win);
for (var button in buttons) {
$("&a&&/a&").attr("href", "javascript:void(0)").text(button).css("margin-left", 10).bind("click", eval(buttons[button])).appendTo(tb).linkbutton();
win.window({
title: title,
noheader: (title ? false : true),
width: 300,
height: "auto",
modal: true,
collapsible: false,
minimizable: false,
maximizable: false,
resizable: false,
onClose: function () {
setTimeout(function () {
win.window("destroy");
win.window("window").addClass("messager-window");
win.children("div.messager-button").children("a:first").focus();
//方法配置
$.messager = {
//在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象：
//showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
//showSpeed：定义窗口显示的过度时间。默认：600毫秒。
//width：定义消息窗口的宽度。默认：250px。
//height：定义消息窗口的高度。默认：100px。
//title：在头部面板显示的标题文本。
//msg：显示的消息文本。
//style：定义消息窗体的自定义样式。
//timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒
show: function (options) {
return _showMassager(options);
//显示警告窗口。参数：
//title：在头部面板显示的标题文本。
//msg：显示的消息文本。
//icon：显示的图标图像。可用值有：error,question,info,warning。
//fn: 在窗口关闭的时候触发该回调函数
alert: function (title, msg, icon, fn) {
var content = "&div&" + msg + "&/div&";
switch (icon) {
case "error":
content = "&div class=\"messager-icon messager-error\"&&/div&" +
case "info":
content = "&div class=\"messager-icon messager-info\"&&/div&" +
case "question":
content = "&div class=\"messager-icon messager-question\"&&/div&" +
case "warning":
content = "&div class=\"messager-icon messager-warning\"&&/div&" +
content += "&div style=\"clear:\"/&";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
return false;
var win = createDialog(title, content, buttons);
//显示一个包含&确定&和&取消&按钮的确认消息窗口。参数：
//title：在头部面板显示的标题文本。
//msg：显示的消息文本。
//fn(b): 当用户点击&确定&按钮的时侯将传递一个true值给回调函数，否则传递一个false值。
confirm: function (title, msg, fn) {
var content = "&div class=\"messager-icon messager-question\"&&/div&" + "&div&" + msg + "&/div&" + "&div style=\"clear:\"/&";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
return false;
buttons[$.messager.defaults.cancel] = function () {
win.window("close");
fn(false);
return false;
var win = createDialog(title, content, buttons);
//显示一个用户可以输入文本的并且带&确定&和&取消&按钮的消息窗体。参数：
//title：在头部面板显示的标题文本。
//msg：显示的消息文本。
//fn(val): 在用户输入一个值参数的时候执行的回调函数
prompt: function (title, msg, fn) {
var content = "&div class=\"messager-icon messager-question\"&&/div&" + "&div&" + msg + "&/div&" + "&br/&" + "&div style=\"clear:\"/&" + "&div&&input class=\"messager-input\" type=\"text\"/&&/div&";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
fn($(".messager-input", win).val());
return false;
buttons[$.messager.defaults.cancel] = function () {
win.window("close");
return false;
var win = createDialog(title, content, buttons);
win.children("input.messager-input").focus();
//显示一个进度消息窗体。
//属性定义为：
//title：在头部面板显示的标题文本。默认：空。
//msg：显示的消息文本。默认：空。
//text：在进度条上显示的文本。默认：undefined。
//interval：每次进度更新的间隔时间。默认：300毫秒。
//方法定义为：
//bar：获取进度条对象。
//close：关闭进度窗口
progress: function (options) {
var methods = {
bar: function () {
return $("body&div.messager-window").find("div.messager-p-bar");
close: function () {
var win = $("body&div.messager-window&div.messager-body:has(div.messager-progress)");
if (win.length) {
win.window("close");
if (typeof options == "string") {
var method = methods[options];
return method();
var opts = $.extend({ title: "", msg: "", text: undefined, interval: 300 }, options || {});
var pbar = "&div class=\"messager-progress\"&&div class=\"messager-p-msg\"&&/div&&div class=\"messager-p-bar\"&&/div&&/div&";
var win = createDialog(opts.title, pbar, null);
win.find("div.messager-p-msg").html(opts.msg);
var bar = win.find("div.messager-p-bar");
bar.progressbar({ text: opts.text });
win.window({
closable: false, onClose: function () {
if (this.timer) {
clearInterval(this.timer);
$(this).window("destroy");
if (opts.interval) {
win[0].timer = setInterval(function () {
var v = bar.progressbar("getValue");
if (v & 100) {
bar.progressbar("setValue", v);
}, opts.interval);
//默认属性
$.messager.defaults = {
ok: "Ok",//确定按钮文本
cancel: "Cancel"//取消按钮文本
})(jQuery);
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Basic Messager - jQuery EasyUI Demo&/title&
&link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"&
&link rel="stylesheet" type="text/css" href="../../themes/icon.css"&
&link rel="stylesheet" type="text/css" href="../demo.css"&
&script type="text/javascript" src="../../jquery-1.8.0.min.js"&&/script&
&script src="../../plugins/jquery.parser.js"&&/script&
&script src="../../plugins/jquery.linkbutton.js"&&/script&
&script src="../../plugins/jquery.draggable.js"&&/script&
&script src="../../plugins/jquery.resizable.js"&&/script&
&script src="../../plugins/jquery.panel.js"&&/script&
&script src="../../plugins/jquery.window.js"&&/script&
&script src="../../plugins/jquery.progressbar.js"&&/script&
&script src="../../plugins/jquery.messager.js"&&/script&
&h2&Basic Messager&/h2&
&div class="demo-info"&
&div class="demo-tip icon-tip"&&/div&
&div&Click on each button to see a distinct message box.&/div&
&div style="margin:10px 0;"&
&a href="#" class="easyui-linkbutton" onclick="show()"&Show&/a&
&a href="#" class="easyui-linkbutton" onclick="slide()"&Slide&/a&
&a href="#" class="easyui-linkbutton" onclick="fade()"&Fade&/a&
&a href="#" class="easyui-linkbutton" onclick="progress()"&Progress&/a&
&script type="text/javascript"&
function show(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
function slide(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
function fade(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
function progress(){
var win = $.messager.progress({
title:'Please waiting',
msg:'Loading data...'
setTimeout(function(){
$.messager.progress('close');
阅读(...) 评论()jquery控件-实现自定义样式的弹出窗口和确认框 - 前端开发 - IT工作生活这点事
现在位置 /
给您更多信息和帮助
在这里您可以找到更多: 技术交流群:
投稿：承接：企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询
echarts教程系列
[] [] [] [] [] [] [] [] []
本月最热文章
微信扫一扫，徜徉悠嘻网，您的休闲乐园
技术交流群:
专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询1196人阅读
JavaScript（7）
就是要把以上按钮改成‘确认’和‘取消’???
解决办法： 在你的 html 页面中引入以下 js 文件
&script src=&../js/locale/easyui-lang-zh_CN.js&&&/script&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：58943次
积分：1118
积分：1118
排名：千里之外
原创：50篇
评论：17条
(7)(2)(7)(8)(17)(9)(2)本帖子已过去太久远了，不再提供回复功能。