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);
- 大小: 43 KB
分享到：
相关推荐
beamDialog 是基于bootstrap V3版本中的modal进行二次封装的结果.主要用于方便的调用modal框体. 个人主页: 参数设置: $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:...
* 本js只是在bootstrap3-dialog的基础上进行的2次封装， * bootstrap3-dialog已经是非常好用了，调用也非常简单。 * 详情请访问：https://github.com/nakupanda/bootstrap3-dialog， * 这是原项目地址，可以自行...
bootstrap-modal 扩展了 Bootstrap 内置的 modal 以提供附加功能，引入了 ModalManager 类可处理多个 modal 并侦听它们的事件。 一个简单的 ModalManager 的创建方式： $('body').modalmanager('loading'); ...
Bootstrap Modal是基于jQuery的一款强大的模态对话框插件，它被广泛应用于Web开发中，以提供弹出式窗口的功能，通常用于显示警告、确认信息、展示详细内容或进行表单输入等场景。这个插件是Bootstrap框架的一个核心...
对于`django-bootstrap-modal-forms-1.4.0.tar.gz`，首先需要解压，然后使用pip进行安装，命令可能包括`pip install .`或者`python setup.py install`。安装完成后，根据文档指示，在Django项目的settings.py中添加...
Tmsgbox不仅提供了基础的提示功能，还允许开发者进行深度定制，例如添加自定义样式、扩展新的功能模块，甚至通过插件机制进行二次开发。通过阅读Tmsgbox的文档和源码，开发者可以更深入地理解和利用这个组件，打造...
var dialog = BootstrapDialog.show({ title: '对话框标题', message: '这是对话框的内容', buttons: [{ label: '确定', cssClass: 'btn-primary', action: function(dialogItself) { // 确定按钮点击后的...
Bootstrap的Dialog.js是一个基于Bootstrap框架的对话框插件，它扩展了Bootstrap的模态（Modal）组件，提供了更丰富的交互性和自定义功能。在网页应用中，对话框常常用于显示警告、确认信息或者进行表单操作，...
react-bootstrap-modal, jschr Bootstrap 模式更好的反应端口 响应 Bootstrap 模式部分是 Bootstrap Modal的jschr 。 Reimplements模式下的Twitter Bootstrap 模式组件。 基于反应引导团队的原始工作。注意：如果你...
基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于...
移动WEB应用实践：Bootstrap应用实践之Bootstrap Modal文章的示例代码 文章地址：http://blog.csdn.net/rowisdom/article/details/17004701
Bootstrap v3 中文文档 深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、 更快、 更强壮的最佳实践。我们对框架中的某些关键部分增加了对移动设备友好的样式。 而在Bootstrap 3中，我们重写了整个...
bootstrap V3 中文文档，和中文官网的一致，方便本地阅读
"modal_dialog_base" 是一个可能与前端开发相关的压缩包文件，尤其在UI设计和交互体验中常见。在网页或应用程序中，模态对话框（Modal Dialog）是一种重要的用户界面元素，用于显示临时信息或者需要用户确认或输入...
基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于...
基于Bootstrap与jQuery-validate的个人封装检验框架demo,拥有良好的UI与用户体验.博客地址：http://blog.csdn.net/u010506919/article/details/75137353
这个压缩包包含的是Bootstrap v3版本的相关资源，对于学习和参考Bootstrap的设计与开发非常有用。 首先，`bootstrap中文手册.chm` 是一个离线版的手册，以CHM（Compiled HTML Help）格式提供，方便在没有网络的情况...
AceAdmin是一款基于Bootstrap的后台管理框架，它以其直观的用户界面和强大的功能集而受到开发者的青睐。在这款框架中，Bootstrap的基础特性与Ace的增强功能相结合，为开发企业级后台管理系统提供了强大支持。 Ace...