基于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);
}
}
});
}
文章评论