基于Bootstrap V3的Modal 进行 Dialog 二次封装 原创文章

1、使用bootstrap modal控件主要还是因为能自适应，是响应式的功能，此插件不用写一些多余的html代码，入modal-dialog、modal-content、modal-header、modal-body、modal-footer，只需要编写content的代码，使用此插件进行渲染。

1、页面加载完后，调用$("选择器").zl_dialog(option); 先进行初始化。

2、$("选择器").zl_dialog("open");

(function() {
$.fn.zl_dialog = function(option, other) {
// 如果是字符串，表示调用方法，否则是执行初始化操作
if (typeof option == "string") {
var method = $.fn.zl_dialog.methods[option];
if (method) {
return method(this, other)
}
}
option = option || {};
return this.each(function() {
var data = $.data(this, "zl_dialog");
if (data) {
$.extend(data.options, option)
} else {
data = $.data(this, "zl_dialog", {
options: $.extend({}, $.fn.zl_dialog.defaults, option)
})
}
transitionEnd(this);
});
};
// 默认参数配置信息
$.fn.zl_dialog.defaults = {
backdrop: "static",
keyboard: false,
show: false,
showClose: true,
appfoothide: true,
title: "",
width: "", // lg, sm
buttons: [],
onBeforeClose: function() {
return true;
},
onClose: function() {},
onShow: function() {},
onBeforeOpen: function() {
return true;
}
};
// 方法
$.fn.zl_dialog.methods = {
open: function(target) {
var modalDialog = $.data(target[0], "zl_dialog");
modalDialog.dialog.modal("show")
},
close: function(target) {
var modalDialog = $.data(target[0], "zl_dialog");
modalDialog.dialog.modal("hide")
},
showLoading: function(target, a) {
var modalDialog = $.data(target[0], "zl_dialog");
modalDialog.dialog.find(">div.modal-dialog").showLoading(a)
},
hideLoading: function(target) {
var modalDialog = $.data(target[0], "zl_dialog");
modalDialog.dialog.find(">div.modal-dialog").hideLoading()
},
resize: function(target) {
resize(target[0])
},
getdhbar: function(target) {
var modalDialog = $.data(target[0], "zl_dialog");
return modalDialog.dialog_head_xs;
},
destory: function(target) {
target.closest("div.modal-dialog").remove()
}
};
// 渲染
var transitionEnd = function(target) {
var modalDialog = $.data(target, "zl_dialog");
var option = $.data(target, "zl_dialog").options;
$(target).addClass("mx-dialog-c");
// 判断是否渲染过，如果渲染过就不执行了。
if (!modalDialog["isdrawui"]) {
var bs_modal_class = "";
var modal_class = "";
if (option.width == "lg") {
bs_modal_class = "bs-example-modal-lg";
modal_class = "modal-lg"
} else if (option.width == "sm") {
bs_modal_class = "bs-example-modal-sm";
modal_class = "modal-sm"
}
modalDialog["dialog"] = $('<div class="modal fade ' + bs_modal_class + '" ><div class="modal-dialog modal-zl-dialog ' + modal_class + '"></div></div>');
modalDialog["dialog_content"] = $('<div class="modal-content"></div>').appendTo(modalDialog.dialog.find(">div.modal-dialog"));
modalDialog["dialog_head"] = $('<div class="modal-header"></div>').appendTo(modalDialog.dialog_content);
modalDialog["dialog_head_xs"] = $('<div class="dh-bar modal-header-xs"></div>').appendTo(modalDialog.dialog_content);
modalDialog["dialog_body"] = $('<div class="modal-body"></div>').appendTo(modalDialog.dialog_content);
modalDialog.dialog_body.append($(target));
modalDialog["dialog_footer"] = $('<div class="modal-footer"></div>').appendTo(modalDialog.dialog_content);
if (option.appfoothide) {
modalDialog.dialog_footer.addClass("appfoothide")
}
$(target).addClass("zl_dialog");
$("body").append(modalDialog.dialog);
modalDialog.dialog.modal({
keyboard: option.keyboard,
show: option.show,
backdrop: option.backdrop
});
modalDialog.dialog.on("show.bs.modal",
function() {
if (option.onBeforeOpen.call(target) == false) return false
}).on("shown.bs.modal",
function() {
$(target).addClass("open");
$(target).resize();
resize(target);
option.onShow.call(target)
}).on("hide.bs.modal",
function() {
if (option.onBeforeClose.call(target) == false) return false;
var data = $.data(target, "zl_dialog");
data.dialog.find(">div.modal-dialog").addClass("modal-zl-dialog")
}).on("hidden.bs.modal",
function() {
$(target).removeClass("open");
var a = $("body").find("div.modal.fade.in");
if (a.length > 0) {
$("body").addClass("modal-open")
}
option.onClose.call(target)
}).on("loaded.bs.modal",
function() {})
}
modalDialog["isdrawui"] = true;
var n = '<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >×</button>';
if (!option.showClose) {
n = ""
}
modalDialog.dialog_head.empty();
modalDialog.dialog_head.html(n + " " + option.title);
modalDialog.dialog_head_xs.empty();
modalDialog.xs_return = $('<button type="button" class="btn pull-left "> <i class="ace-icon fa fa-angle-left bigger-120"></i>关闭</button> ').appendTo(modalDialog.dialog_head_xs);
if (!option.showClose) {
modalDialog.xs_return.remove()
}
$(option.title).appendTo(modalDialog.dialog_head_xs);
modalDialog.xs_more = $('<div class="btn-group pull-right"><button type="button" class="btn no-border dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ace-icon fa fa-reorder "></i></button><ul class="dropdown-menu dropdown-light"></ul></div>').appendTo(modalDialog.dialog_head_xs);
if (modalDialog.xs_return && modalDialog.xs_return.length > 0) {
modalDialog.xs_return.on("click",
function(e) {
modalDialog.dialog.modal("hide")
})
}
modalDialog.dialog_footer.empty();
if (option.buttons && option.buttons.length > 0) {
modalDialog.dialog_footer.show();
$.each(option.buttons, function(i, button) {
var buttonDomain = $(button.dom).appendTo(modalDialog.dialog_footer);
buttonDomain.on("click",
function() {
return button.handler.call(this)
});
var ul = modalDialog.xs_more.find("ul");
if (!buttonDomain.is("button,div.btn-group")) {
return true
}
if (buttonDomain.hasClass("mx-xs-quick")) {
var html = buttonDomain.html();
var n = $('<button type="button" class="btn pull-right" > ' + html + "</button> ").appendTo(modalDialog.dialog_head_xs);
$.data(n[0], "linkbtn", buttonDomain);
$.data(buttonDomain[0], "linkbtn", n);
n.on("click", function(e) {
var a = $.data(this, "linkbtn");
a.trigger("click")
});
return true
}
if (buttonDomain.hasClass("btn-group")) {
var d = buttonDomain.find(">button").html();
$('<li class="divider"></li>').appendTo(ul);
var l = buttonDomain.find(">ul");
l.find(">li").each(function(e, a) {
$liO = $(a);
if ($liO.hasClass("divider")) {
$('<li class="divider"></li>').appendTo(ul);
return true
}
var i = $("<li>" + $liO.html() + "</li>").appendTo(ul);
if ($liO.hasClass("disabled") || $liO.hasClass("hidden")) {
i.addClass("hidden")
}
$.data(i[0], "linkbtn", $liO);
$.data($liO[0], "linkbtn", i);
i.on("click",
function(e) {
var a = $.data(this, "linkbtn");
a.trigger("click")
})
})
} else {
var d = buttonDomain.html();
var s = $('<li><a href="#" >' + d + "</a></li>").appendTo(ul);
if (buttonDomain.hasClass("disabled") || buttonDomain.hasClass("hidden")) {
s.addClass("hidden")
}
$.data(s[0], "linkbtn", buttonDomain);
$.data(buttonDomain[0], "linkbtn", s);
s.on("click",
function(e) {
var a = $.data(this, "linkbtn");
a.trigger("click")
})
}
});
if (modalDialog.xs_more.find(">ul>li").length <= 0) {
modalDialog.xs_more.addClass("hidden")
} else {
modalDialog.xs_more.removeClass("hidden")
}
} else {
modalDialog.dialog_footer.hide()
}
modalDialog.dialog.find('a[data-toggle="tab"]').on("shown.bs.tab",
function(i) {
resize(target)
});
};
var resize = function(target) {
var data = $.data(target, "zl_dialog");
var i = $.data(target, "zl_dialog").options;
data.dialog.find(">div.modal-dialog").removeClass("modal-zl-dialog");
var wh = $(window).height();
data.dialog.removeClass("mx-xs")
if (data.dialog_head.outerHeight() + data.dialog_body.outerHeight() + data.dialog_footer.outerHeight() > wh) {
data.dialog.find(".modal-dialog").addClass("max")
} else {}
data.dialog_body.css({
"max-height": wh - data.dialog_head.outerHeight() - data.dialog_footer.outerHeight() - 5
})
}
})(jQuery);