实现功能：

1.修改标题样式。把jquery ui的标题样式放上去。支持换肤。

2.修改按钮样式，换成jqueryui的button按钮样式。

3.将模式化窗口的背景换成了jqueryui的模式化背景。

代码：

//首先要引入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 pixels horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/ repositionOnResize: true, // re-centers the dialog on window resize overlayOpacity: .01, // transparency level of overlay overlayColor: '#FFF', // base color of overlay draggable: true, // make the dialogs draggable (requires UI Draggables plugin) okButton: '确认', // text for the OK button cancelButton: '取消', // text for the Cancel button dialogClass: 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">' + '<h2 id="popup_title"></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')" 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')" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" onmouseover="$(this).addClass('ui-state-hover')" onmouseout="$(this).removeClass('ui-state-hover')" 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')" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" onmouseover="$(this).addClass('ui-state-hover')" onmouseout="$(this).removeClass('ui-state-hover')" 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 draggable if( $.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 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 fix if ('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 functions jAlert = 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>

以上所述就是本文的全部内容了，希望大家能够喜欢。