jquery ui 消息框

样式

<style type="text/css">
.message {
	border: none !important;
	margin: 0;
	padding: .5em .5em .5em .5em
}

.message-ico {
	float: left;
	margin: 0 1em 0 0;
}

.message-content {
}
</style>

javascript

<script type="text/javascript">

function createDialog(options) {
	options = options || {};
	$.extend(options, {
		close: function( event, ui ) {
			var d = $(this);
			d.parent().remove();
			d.remove();
		},
		autoOpen: false,
		show: "fade",
		hide: "fade"
	});
	var dialog = $("<div>")
		.appendTo("body")
		.dialog(options);
	if (options.id) {
		dialog.attr("id", options.id);
	} else {
		dialog.uniqueId();
	}
	return dialog;
}

 function createMessageDiv(msg) {
	var div = $("<div>").addClass("ui-state-default message");
	$("<span>")
		.addClass("ui-icon ui-icon-info message-ico")
		.appendTo(div);
	$("<div>")
		.addClass("message-content")
		.appendTo(div)
		.text(msg);
	return div;
}
 
function showMessage(msg, title) {
	title = title || "信息";
	var dialog = createDialog({
		title: title,
		buttons : [ {
			text : getText("ok"),
			click : function() {
				$(this).dialog("close");
			}
		} ]
	});
	createMessageDiv(msg).appendTo(dialog);
	dialog.dialog("open");
}
</script>

页面调用

<input type="button" onclick="showMessage('这是一条信息')" value="信息">