jquery ui 模态alert confirm

2014/01/14 4175点热度 0人点赞 0条评论

基于jquery ui做的模态框,该alert不可以停顿,不能穿透最上面的iframe,如需要停顿,可以将点击确定后执行的代码放入到对应的判断里。效果图如下:(UI可以自己调整)

 var mDialogCallback;
 /**
  * 带图标的确认框,使用方法
  * showMsgConfirmWithIcon("标题","确认内容","确认内容二",function(opt){
		if(opt){
			showMsgAlert("消息提示","点击了确定");
		}else{
			showMsgAlert("消息提示","点击了取消");
		}
    })
  * @param title  确认框标题
  * @param message1  提示内容1
  * @param message2  提示内容2
  * @param callback  回调方法
  */
 function showMsgConfirmWithIcon(title,message1,message2,callback){
	 var confirmHtml='<div id="ConfirmMessage" title="'+title+'"><p id="ConfirmMessageBody"  class="msgbody"> '+' <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>'+message1+'</p><p>'+message2+'</p></div>';
	  mDialogCallback = callback;
	  $(confirmHtml).dialog({
	        // autoOpen: false,
	         width: 300,
	         modal: true,
	         closeOnEscape: false,
	         open: function(event, ui) { $(".ui-icon-closethick").hide(); },//去掉右上角的x
	         buttons: {
	             "确定": function() {
	                  $(this).dialog('close');
	                 mDialogCallback(true);
	             },
		         "取消": function() {
	                 $(this).dialog('close');
	                 mDialogCallback(false);
	             }
	         }
	     });
      $("button").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover");
 }
 /**
  * 不带modal的弹出框
  * @param title
  * @param message1
  * @param message2
  * @param callback
  */
 function showMsgConfirmWithIconNotModel(title,message1,message2,callback){
	 var confirmHtml='<div id="ConfirmMessage" title="'+title+'"><p id="ConfirmMessageBody"  class="msgbody"> '+' <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>'+message1+'</p><p>'+message2+'</p></div>';
	  mDialogCallback = callback;
	  $(confirmHtml).dialog({
	        // autoOpen: false,
	         width: 300,
	         modal: false,
	         closeOnEscape: false,
	         open: function(event, ui) { $(".ui-icon-closethick").hide(); },//去掉右上角的x
	         buttons: {
	             "确定": function() {
	                  $(this).dialog('close');
	                 mDialogCallback(true);
	             },
		         "取消": function() {
	                 $(this).dialog('close');
	                 mDialogCallback(false);
	             }
	         }
	     });
      $("button").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover");
 }
 /**
  * 不带图标的确认框,用法同上
  * @param title  提示标题
  * @param message  提示内容
  * @param callback 回调函数
  */
 function showMsgConfirmWithoutIcon(title,message,callback){
	 var confirmHtml='<div id="ConfirmMessage" title="'+title+'"><p id="ConfirmMessageBody"  class="msgbody"> '+message+'</p></div>';
	  mDialogCallback = callback;
	  $(confirmHtml).dialog({
	        // autoOpen: false,
	         width: 300,
	         closeOnEscape: false,
	         open: function(event, ui) { $(".ui-icon-closethick").hide(); },//去掉右上角的x
	         modal: true,
	         buttons: {
	             "确定": function() {
	                  $(this).dialog('close');
	                 mDialogCallback(true);
	             },
		         "取消": function() {
	                 $(this).dialog('close');
	                 mDialogCallback(false);
	             }
	         }
	     });
      $("button").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover");
 }
 /**
  * 模态alert,不支持确认以后执行某些方法
  * @param title
  * @param message
  */
 function showMsgAlert(title,message){
	 var alertHtml='<div id="AlertMessage" title="'+title+'"><p id="AlertMessageBody"  class="msgbody">'+message+"</p></div>";
	 $(alertHtml).dialog({
		// autoOpen: false,
         width: 300,
         modal: true,
         closeOnEscape: false,
         open: function(event, ui) { $(".ui-icon-closethick").hide(); },//去掉右上角的x
         buttons: {
        	 "确认": function() {
                 $(this).dialog("destroy");
             }
         }
	 });
	 $("button").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover");
	 $(".ui-widget-overlay").css("z-index","1100");
	 $(".ui-dialog").css("z-index","9999");
 }
 /**
  * 类似于alert的停顿,必须将确认以后执行的内容放入到if里
  * showMsgAlertWithFn("消息提示","点击了确定",function(data){
		if(data){
			showMsgAlert("消息提示","点击了确定后执行的方法");
		}
	});
  * @param title  提示标题
  * @param message  提示内容
  * @param callback 回调函数
  */
 function showMsgAlertWithFn(title,message,callback){
	 var confirmHtml='<div id="AlertMessage" title="'+title+'"><p id="AlertMessageBody"  class="msgbody"> '+message+'</p></div>';
	  mDialogCallback = callback;
	  $(confirmHtml).dialog({
	        // autoOpen: false,
	         width: 300,
	         modal: true,
	         closeOnEscape: false,
	         open: function(event, ui) { $(".ui-icon-closethick").hide(); },//去掉右上角的x
	         buttons: {
	             "确定": function() {
	                  $(this).dialog('close');
	                 mDialogCallback(true);
	             }
	         }
	     });
      $("button").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover");
 }
 function showMsgAlertWithFnNotModel(title,message,callback){
	 var confirmHtml='<div id="AlertMessage" title="'+title+'"><p id="AlertMessageBody"  class="msgbody"> '+message+'</p></div>';
	  mDialogCallback = callback;
	  $(confirmHtml).dialog({
	        // autoOpen: false,
	         width: 300,
	         modal: false,
	         closeOnEscape: false,
	         open: function(event, ui) { $(".ui-icon-closethick").hide(); },//去掉右上角的x
	         buttons: {
	             "确定": function() {
	                  $(this).dialog('close');
	                 mDialogCallback(true);
	             }
	         }
	     });
      $("button").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover");
 }
/***  暂时废弃
  showConfirm("标题","内容以","内容二",function(){
	 showConfirm("标题","点了确定");
	},function(){
		alert("点了取消");
	});
 * @param title  消息标题
 * @param message1 消息内容一
 * @param message2 消息内容二
 * @param fn  确定方法的回调函数
 * @param fn2  取消方法的回调函数
 * @returns
 */
function showConfirm(title,message1,message2,fn,fn2){
	if(!message2){
		message2="";
	}
	var html =
		'<div  id="dialog-message">' + 
		' <p>' + 
		' <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>' + message1 + 
		' </p>' + '<p>'+message2+'</p>'
		'</div>'; 
		return $(html).dialog({ 
			//autoOpen: false, 
			resizable: false, 
			modal: true, 
			show: { 
			  effect: 'fade', 
			  duration: 300 
			},
			title: title || "提示信息", 
			buttons: {
			        "确认": function() {
			          var dlg = $( this ).dialog( "close" );
			          fn && fn.call(dlg,true); 
			        },
			        "取消": function() {
			          var dlg = $( this ).dialog( "close" );
			          fn2 && fn2.call(dlg,false); 
			        }
			 }
		});
}

yxkong

这个人很懒,什么都没留下

文章评论