最近，公司一直在做微网站之类的，一直在看别的微网站，发现一些对话框的样式很不错，所以自己就动手把样式剥离出来写成一个简单的插件，方便其他项目中使用到。废话不多说，上插件源码：
/*
*jQuery简单消息框插件
*2014-03-14
*调用：
*$.dialog.alert("提示消息");
*对话框的调用：$.dialog.message("消息");仅有确定的对话框
*$.dialog.message("消息", true, callback);带取消和回调函数的对话框,空函数请传$.noop
*/
jQuery.dialog = {
/*
*消息框
*/
alert: function (text) {
var $window = $('<div id="windowcenter"></div>');
$window.css({ "position": "absolute", "width": "267px", "display": "none", "margin": "0 auto 0 -136px", "padding": "2px",
"bottom": "60px", "left": "50%", "border-radius": "0.6em", "-webkit-border-radius": "0.6em", "-moz-border-radius": "0.6em",
"background-color": "#f1f1f1", "-webkit-box-shadow": "0 0 10px rgba(0, 0, 0, 0.5)", "-moz-box-shadow": "0 0 10px rgba(0, 0, 0, 0.5)",
"-o-box-shadow": "0 0 10px rgba(0, 0, 0, 0.5)", "box-shadow": "0 0 10px rgba(0, 0, 0, 0.5)",
"font": "14px/1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif", "z-index": "10"
});
var $title = $('<div>操作提示</div>');
$title.css({ "background-color": "#585858", "line-height": "26px", "padding": "5px 5px 5px 10px", "color": "#fff", "font-size": "16px",
"border-radius": "0.5em 0.5em 0 0", "-webkit-border-radius": "0.5em 0.5em 0 0", "-moz-border-radius": "0.5em 0.5em 0 0"
});
var $close = $('<span></span>');
$close.css({ "float": "right", "width": "26px", "height": "26px", "display": "block", "background-image": "url('data:image/png;base64," +
"iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACTSURBVEhL7dNtCoAgD" +
"AZgb60nsGN1tPLVCVNHmg76kQ8E1mwv+GG27cestQ4PvTZ69SFocBGpWa8+zHt/Up+IN+MhgLlUmnIE1CpBQB2COZibfpnXhHFaIZkYph0SOeeK/QJ8o7KOek84fkCWSBtfL+N" +
"y2MPpCkPFMH6PWEhWhKncIyEk69VfiUuVhqJefds+YcwNbEwxGqGIFWYAAAAASUVORK5CYII=')"
});
$close.click(function () {
if ($("#windowcenter").length > 0) {
$("#windowcenter").slideUp(500);
}
});
$title.append($close);
$window.append($title);
var $content = $('<div></div>');
$content.css({ "overflow": "auto", "padding": "10px", "color": "#222", "text-shadow": "0 1px 0 #FFFFFF" });
var $text = $('<div></div>');
$text.css({ "min-height": "30px", "font-size": "14px", "line-height": "20px" });
$text.text(text);
$content.append($text);
$window.append($content); if ($("#windowcenter").length > 0) {
$("#windowcenter").remove();
}
$("body").append($window);
$("#windowcenter").slideToggle("slow");
setTimeout('$("#windowcenter").slideUp(500)', 4000);
},
/*
*对话框
*/
message: function (text, hasCancel, callback) {
var $popTips = $('<div id="popTips" style="display: block;"></div>');
$popTips.css({ "position": "fixed", "z-index": "300", "left": "50%", "top": "20%", "width": "255px", "overflow": "hidden",
"margin-left": "-122px", "background-color": "#FBFBFB", "font-size": "14px", "text-align": "center", "border-radius": "5px"
});
$popTips.append('<div></div>'); var $popShow = $('<div></div>');
var $title = $('<h4>温馨提示</h4>');
$title.css({ "padding": "0", "margin": "0", "height": "34", "font-size": "16px", "border-bottom": "1px solid #EDEDED",
"line-height": "34px", "color": "#252E32"
});
$popShow.append($title);
var $text = $('<div>' + text + '</div>');
$text.css({ "font-size": "16px", "padding": "20px 0px", "background-color": "#FFF" });
$popShow.append($text);
var $popBtns = $('<div></div>');
$popBtns.css("text-align", "center");
var a_css = { "display": "block", "font-weight": "700", "height": "40px", "line-height": "40px", "border-top": "1px solid #E2E1E0",
"text-decoration": "none", "color": "#5B5B5B"
};
//取消事件或OK事件
var cancelEvent = function () {
if ($("#popTips").length > 0) {
$("#popTips").remove();
}
}
var $ok = $('<a href="javascript:void(0);">确定</a>');
$ok.css(a_css);
//有取消按钮并且有确定的回调函数，设置确定后调用回调函数并追加取消按钮同时设定取消事件
if (hasCancel && $.isFunction(callback)) {
$ok.click(callback);
//设置取消按钮和取消事件
$ok.css({ "width": "127px", "float": "right" });
var $cancel = $('<a style="clear:both;width:127px; float:left; border-right:1px solid #E2E1E0" href="javascript:void(0);">取消</a>');
$cancel.css(a_css);
$cancel.click(cancelEvent);
$popBtns.append($cancel);
} else {
$ok.click(cancelEvent);
}
$popBtns.append($ok);
$popShow.append($popBtns);
$popTips.append($popShow);
if ($("#popTips").length > 0) {
$("#popTips").remove();
}
$('body').append($popTips);
}
};
页面上调用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试</title>
<!--引用jQuery-->
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/jquery.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#test").click(function () {
$.dialog.alert("123");
}); $("#testMessage").click(function () {
var ok = function () {
alert("点击确定了");
}
$.dialog.message("测试对话框", true, ok);
});
$("#testCancel").click(function () {
$.dialog.message("只有确定的对话框哦");
});
});
</script>
</head>
<body style="background-color: rgba(0,0,0,0.7);">
<input type="button" id="testMessage" value="有取消按钮" />
<input type="button" id="testCancel" value="没有取消按钮" />
<input type="button" id="test" value="测试" />
</body>
</html>
看看效果：