基于jquery ui的alert,confirm方案（支持换肤）

//首先要引入jquery，以及ui的包和皮肤的样式如：<script src="../js/ui/jquery-1.11.0.min.js"></script> <script src="../js/ui/jquery-migrate-1.1.0.min.js"></script> <script src="../js/ui/minified/jquery.ui.core.min.js"></script>  <script src="../js/ui/minified/jquery.ui.widget.min.js"></script>  <script src="../js/ui/minified/jquery.ui.mouse.min.js"></script>  <script src="../js/ui/minified/jquery.ui.button.min.js"></script>  <script src="../js/ui/minified/jquery.ui.draggable.min.js"></script><link rel="stylesheet" type="text/css" href="../js/ui/themes/humanity/jquery-ui.css"></link>   (function($) { $.alerts = { // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time verticalOffset: -75, // vertical offset of the dialog from center screen, in pixelshorizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/repositionOnResize: true, // re-centers the dialog on window resizeoverlayOpacity: .01, // transparency level of overlayoverlayColor: '#FFF', // base color of overlaydraggable: true, // make the dialogs draggable (requires UI Draggables plugin)okButton: ' 确认 ', // text for the OK buttoncancelButton: ' 取消 ', // text for the Cancel buttondialogClass: null, // if specified, this class will be applied to all dialogs // Public methods alert: function(message, title, callback) {if( title == null ) title = 'Alert';$.alerts._show(title, message, null, 'alert', function(result) {if( callback ) callback(result);});}, confirm: function(message, title, callback) {if( title == null ) title = 'Confirm';$.alerts._show(title, message, null, 'confirm', function(result) {if( callback ) callback(result);});}, prompt: function(message, value, title, callback) {if( title == null ) title = 'Prompt';$.alerts._show(title, message, value, 'prompt', function(result) {if( callback ) callback(result);});}, // Private methods _show: function(title, msg, value, type, callback) { $.alerts._hide();$.alerts._overlay('show'); $("BODY").append('<div id="popup_container" style="width:300px;height:150px;">' +'<h2 id="popup_title" style="margin:0;padding:0;" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"></h2>' +'<div id="popup_content">' +'<div id="popup_message"></div>' +'</div>' +'</div>'); if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass); // IE6 Fix//var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed';var pos = ('undefined' == typeof (document.body.style.maxHeight)) ? 'absolute' : 'fixed'; $("#popup_container").css({position: pos,zIndex: 99999,padding: 0,margin: 0}); $("#popup_title").text(title);$("#popup_content").addClass(type);$("#popup_message").text(msg);$("#popup_message").html( $("#popup_message").text().replace(//n/g, '<br />') ); $("#popup_container").css({minWidth: $("#popup_container").outerWidth(),maxWidth: $("#popup_container").outerWidth()}); $.alerts._reposition();$.alerts._maintainPosition(true); switch( type ) {case 'alert':$("#popup_message").after('<div id="popup_panel"><input type="button" onmouseover="$(this).addClass(/'ui-state-hover/')" onmouseout="$(this).removeClass(/'ui-state-hover/')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');$("#popup_ok").click( function() {$.alerts._hide();callback(true);});$("#popup_ok").focus().keypress( function(e) {if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');});break;case 'confirm':$("#popup_message").after('<div id="popup_panel"><input type="button" onmouseover="$(this).addClass(/'ui-state-hover/')" onmouseout="$(this).removeClass(/'ui-state-hover/')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" onmouseover="$(this).addClass(/'ui-state-hover/')" onmouseout="$(this).removeClass(/'ui-state-hover/')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"  value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');$("#popup_ok").click( function() {$.alerts._hide();if( callback ) callback(true);});$("#popup_cancel").click( function() {$.alerts._hide();if( callback ) callback(false);});$("#popup_ok").focus();$("#popup_ok, #popup_cancel").keypress( function(e) {if( e.keyCode == 13 ) $("#popup_ok").trigger('click');if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');});break;case 'prompt':$("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" onmouseover="$(this).addClass(/'ui-state-hover/')" onmouseout="$(this).removeClass(/'ui-state-hover/')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" onmouseover="$(this).addClass(/'ui-state-hover/')" onmouseout="$(this).removeClass(/'ui-state-hover/')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"  value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');$("#popup_prompt").width( $("#popup_message").width() );$("#popup_ok").click( function() {var val = $("#popup_prompt").val();$.alerts._hide();if( callback ) callback( val );});$("#popup_cancel").click( function() {$.alerts._hide();if( callback ) callback( null );});$("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {if( e.keyCode == 13 ) $("#popup_ok").trigger('click');if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');});if( value ) $("#popup_prompt").val(value);$("#popup_prompt").focus().select();break;} // Make draggableif( $.alerts.draggable ) {try {$("#popup_container").draggable({ handle: $("#popup_title") });$("#popup_title").css({ cursor: 'move' });} catch(e) { /* requires jQuery UI draggables */ }}}, _hide: function() {$("#popup_container").remove();$.alerts._overlay('hide');$.alerts._maintainPosition(false);}, _overlay: function(status) {switch( status ) {case 'show':$.alerts._overlay('hide');$("BODY").append('<div class="ui-widget-overlay" id="popup_overlay"></div>');break;case 'hide':$("#popup_overlay").remove();break;}}, _reposition: function() {var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;if( top < 0 ) top = 0;if( left < 0 ) left = 0; // IE6 fixif ('undefined' == typeof (document.body.style.maxHeight)) top = top + $(window).scrollTop(); $("#popup_container").css({top: top + 'px',left: left + 'px'});}, _maintainPosition: function(status) {if( $.alerts.repositionOnResize ) {switch(status) {case true:$(window).bind('resize', function() {$.alerts._reposition();});break;case false:$(window).unbind('resize');break;}}} } // Shortuct functionsjAlert = function(message, title, callback) {$.alerts.alert(message, title, callback);} jConfirm = function(message, title, callback) {$.alerts.confirm(message, title, callback);}; jPrompt = function(message, value, title, callback) {$.alerts.prompt(message, value, title, callback);}; })(jQuery);   <style>*{margin:0;padding:0;}#popup_container {font-family: Arial, sans-serif;font-size: 12px;min-width: 300px; /* Dialog will be no smaller than this */max-width: 600px; /* Dialog will wrap after this width */background: #FFF;border: solid 1px #D09042;color: #000;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}  #popup_content {background: 16px 16px no-repeat url(images/info.gif);padding: 1em 1.75em;margin: 0em;} #popup_content.alert {background-image: url(../images/info.png);} #popup_content.confirm {background-image: url(../images/important.png);} #popup_content.prompt {background-image: url(../images/help.png);} #popup_message {padding-left: 48px;height:30px;padding-top:10px;font-size:15px;} #popup_panel {text-align: center;margin: 1em 0em 0em 1em;} #popup_prompt {margin: .5em 0em;}</style> //使用方法<script>jConfirm('您确定吗?', '系统 提示', function(r) {  jAlert('你选择了: ' + r, '友情提示');});</script>