基于jquery ui的alert,confirm方案（支持换肤）
实现功能：
1.修改标题样式。把jqueryui的标题样式放上去。支持换肤。
2.修改按钮样式，换成jqueryui的button按钮样式。
3.将模式化窗口的背景换成了jqueryui的模式化背景。
代码：
//首先要引入jquery，以及ui的包和皮肤的样式如：
<scriptsrc="../js/ui/jquery-1.11.0.min.js"></script>
<scriptsrc="../js/ui/jquery-migrate-1.1.0.min.js"></script>
<scriptsrc="../js/ui/minified/jquery.ui.core.min.js"></script>
<scriptsrc="../js/ui/minified/jquery.ui.widget.min.js"></script>
<scriptsrc="../js/ui/minified/jquery.ui.mouse.min.js"></script>
<scriptsrc="../js/ui/minified/jquery.ui.button.min.js"></script>
<scriptsrc="../js/ui/minified/jquery.ui.draggable.min.js"></script>
<linkrel="stylesheet"type="text/css"href="../js/ui/themes/humanity/jquery-ui.css"></link>
(function($){
$.alerts={
//Thesepropertiescanberead/writtenbyaccessing$.alerts.propertyNamefromyourscriptsatanytime
verticalOffset:-75,//verticaloffsetofthedialogfromcenterscreen,inpixels
horizontalOffset:0,//horizontaloffsetofthedialogfromcenterscreen,inpixels/
repositionOnResize:true,//re-centersthedialogonwindowresize
overlayOpacity:.01,//transparencylevelofoverlay
overlayColor:'#FFF',//basecolorofoverlay
draggable:true,//makethedialogsdraggable(requiresUIDraggablesplugin)
okButton:' 确认 ',//textfortheOKbutton
cancelButton:' 取消 ',//textfortheCancelbutton
dialogClass:null,//ifspecified,thisclasswillbeappliedtoalldialogs
//Publicmethods
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);
});
},
//Privatemethods
_show:function(title,msg,value,type,callback){
$.alerts._hide();
$.alerts._overlay('show');
$("BODY").append(
'<divid="popup_container"style="width:300px;height:150px;">'+
'<h2id="popup_title"style="margin:0;padding:0;"class="ui-dialog-titlebarui-widget-headerui-corner-allui-helper-clearfix"></h2>'+
'<divid="popup_content">'+
'<divid="popup_message"></div>'+
'</div>'+
'</div>');
if($.alerts.dialogClass)$("#popup_container").addClass($.alerts.dialogClass);
//IE6Fix
//varpos=($.browser.msie&&parseInt($.browser.version)<=6)?'absolute':'fixed';
varpos=('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('<divid="popup_panel"><inputtype="button"onmouseover="$(this).addClass(\'ui-state-hover\')"onmouseout="$(this).removeClass(\'ui-state-hover\')"class="ui-buttonui-widgetui-state-defaultui-corner-allui-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('<divid="popup_panel"><inputtype="button"onmouseover="$(this).addClass(\'ui-state-hover\')"onmouseout="$(this).removeClass(\'ui-state-hover\')"class="ui-buttonui-widgetui-state-defaultui-corner-allui-button-text-only"value="'+$.alerts.okButton+'"id="popup_ok"/><inputtype="button"onmouseover="$(this).addClass(\'ui-state-hover\')"onmouseout="$(this).removeClass(\'ui-state-hover\')"class="ui-buttonui-widgetui-state-defaultui-corner-allui-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/><inputtype="text"size="30"id="popup_prompt"/>').after('<divid="popup_panel"><inputtype="button"onmouseover="$(this).addClass(\'ui-state-hover\')"onmouseout="$(this).removeClass(\'ui-state-hover\')"class="ui-buttonui-widgetui-state-defaultui-corner-allui-button-text-only"value="'+$.alerts.okButton+'"id="popup_ok"/><inputtype="button"onmouseover="$(this).addClass(\'ui-state-hover\')"onmouseout="$(this).removeClass(\'ui-state-hover\')"class="ui-buttonui-widgetui-state-defaultui-corner-allui-button-text-only"value="'+$.alerts.cancelButton+'"id="popup_cancel"/></div>');
$("#popup_prompt").width($("#popup_message").width());
$("#popup_ok").click(function(){
varval=$("#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;
}
//Makedraggable
if($.alerts.draggable){
try{
$("#popup_container").draggable({handle:$("#popup_title")});
$("#popup_title").css({cursor:'move'});
}catch(e){/*requiresjQueryUIdraggables*/}
}
},
_hide:function(){
$("#popup_container").remove();
$.alerts._overlay('hide');
$.alerts._maintainPosition(false);
},
_overlay:function(status){
switch(status){
case'show':
$.alerts._overlay('hide');
$("BODY").append('<divclass="ui-widget-overlay"id="popup_overlay"></div>');
break;
case'hide':
$("#popup_overlay").remove();
break;
}
},
_reposition:function(){
vartop=(($(window).height()/2)-($("#popup_container").outerHeight()/2))+$.alerts.verticalOffset;
varleft=(($(window).width()/2)-($("#popup_container").outerWidth()/2))+$.alerts.horizontalOffset;
if(top<0)top=0;
if(left<0)left=0;
//IE6fix
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){
casetrue:
$(window).bind('resize',function(){
$.alerts._reposition();
});
break;
casefalse:
$(window).unbind('resize');
break;
}
}
}
}
//Shortuctfunctions
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;/*Dialogwillbenosmallerthanthis*/
max-width:600px;/*Dialogwillwrapafterthiswidth*/
background:#FFF;
border:solid1px#D09042;
color:#000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#popup_content{
background:16px16pxno-repeaturl(images/info.gif);
padding:1em1.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:1em0em0em1em;
}
#popup_prompt{
margin:.5em0em;
}
</style>
//使用方法
<script>
jConfirm('您确定吗?','系统提示',function(r){
jAlert('你选择了:'+r,'友情提示');
});
</script>
以上所述就是本文的全部内容了，希望大家能够喜欢。