支持自定义按钮和自定义弹出内容
$.topsDialog = function (options) {
var settings = $.extend({
title: "",
$obj: null,//jq对象
url: null, // 显示url
buttons: null,//格式[{id:'',name:'',onClick:''}]
enterID: null,//回车触发的按钮，参数：id
callback: null,
height: '400',
width: '500',
showCloseBox: false, //关闭按钮
isHide: true, //showCloseBox 为true 时有效，true-隐藏对话框，false-销毁对话框
showMaxBox: false, //最大化按钮)
isHeaderShow: true, /*是否显示标题*/
isFooterShow: true, /*是否显示footer*/
onFormLoad:null, //对url 参数有效 表示iframe 加载完成后执行动作
maxCallback:null
}, options);
function dialog() {
var p = this;
p._dialogStatus = 0; //0-normal dialog 1-max dialog
var $modal = $("<div>").addClass("modal");
var $backdrop = $("<div>").addClass("modal-backdrop fade in");
var $content = $('<div class="modal-dialog" style="height:' + settings.height + 'px;width:' + settings.width + 'px">'
+ '<div class="modal-content" style="height:100%;">'
+ ' <div class="modal-header" style="position:relative;display:none;"></div>'
+ ' <div class="modal-body"></div>'
+ (settings.isFooterShow ? ' <div class="modal-footer"></div>' : '')
+ '</div>');
var $toolBars = $('<div class="h-toolbars">');
var hasHader = false;
if (settings.showMaxBox) {
var $max = $('<span class="h-max glyphicon glyphicon-fullscreen"></span>');
$max.on("click", function () {
p.max();
})
$toolBars.append($max);
var $normal = $('<span class="h-normal glyphicon glyphicon-resize-small"></span>');
$normal.on("click", function (e) {
p.normal();
stopEventBubble(e);
})
$toolBars.append($normal);
hasHader = true;
$(".modal-header", $content).on("dblclick", function () {
p.toggle();
})
}
if (settings.showCloseBox) {
var $close = $('<span class="h-close glyphicon glyphicon-remove"></span>');
$close.on("click", function (e) {
if (settings.isHide) {
p.hide();
}
else {
p.close();
}
stopEventBubble(e);
})
$toolBars.append($close);
hasHader = true;
}
$(".modal-header", $content).append($toolBars);
if (settings.isHeaderShow) {
var $title = $('<h4 class="modal-title" id="myModalLabel">' + settings.title + '</h4>');
$(".modal-header", $content).append($title);
hasHader = true;
}
if (hasHader) {
$(".modal-header", $content).css({ "min-height": "56px", "display": "block" });
}
this.backdrop = $backdrop;
this.modal = $modal;
this.content = $content;
var buttons = {};
this.buttons = buttons;
(function init() {
if (settings.url) {
var $iframe = $("<iframe style='width:100%;height:99%' frameborder='0' border='0'>").attr("src", settings.url);
if (settings.onFormLoad && $.isFunction(settings.onFormLoad)) {
$iframe.load(function () {
settings.onFormLoad.call($(this));
})
}
$('.modal-body', $content).append($iframe);
}
else {
$('.modal-body', $content).append(settings.$obj);
}
if (settings.buttons && settings.buttons.length > 0) {
$.each(settings.buttons, function () {
var p = this;
var $b = $('<button type="button" class="btn btn-primary" data-loading-text="处理中…" id="' + p.id + '">' + p.name + '</button>');
if ($.isFunction(p.onClick)) {
$b.click(function () {
p.onClick.call(settings);
if ($.isFunction(settings.callback))
settings.callback.call(settings);
});
}
$('.modal-footer ', $content).append($b);
var b = {
id: p.id,
name: p.name,
obj: $b,
hide: function () {
$b.hide();
},
show: function () {
$b.show();
},
disabled: function () {
$b.attr('disabled', 'disabled');
},
enabled: function () {
$b.removeAttr('disabled');
}
}
buttons[p.id] = b;
})
}
if (settings.enterID) {
$("body").on("keydown", function (e) {
if (e.keyCode == 13)
$('button#' + settings.enterID, $content).click();
});
}
$backdrop.appendTo("body");
$modal.append($content).appendTo("body");
})();
this.hide = function () {
$backdrop.hide();
$modal.hide();
p._dialogStatus = 0;
return this;
}
this.show = function () {
$backdrop.show();
$modal.show();
if (p._dialogStatus == 0) {
$content.css({ width: settings.width + 'px', height: settings.height + 'px', margin: "unsert" });
$(".h-max", $content).show();
$(".h-normal", $content).hide();
}
else if (p._dialogStatus == 1) {
$content.css({ width: "99%", height: "98%", margin: "10px auto" });
$(".h-max", $content).hide();
$(".h-normal", $content).show();
}
this._calcSize();
return this;
}
this.close = function () {
$backdrop.remove();
$modal.remove();
p._dialogStatus = 0;
}
this.max = function () {
var p = this;
p._dialogStatus = 1;
$content.animate({ width: "99%", height: "98%", margin: "10px auto" }, 300, function () {
$(".h-max", $content).hide();
$(".h-normal", $content).show();
p._calcSize();
if ($.isFunction(settings.maxCallback))
settings.maxCallback.call(settings);
});
//$content.css({ width: "99%", height: "98%", margin: "10px auto" });
return p;
}
this.normal = function () {
var p = this;
p._dialogStatus = 0;
$content.animate({ width: settings.width + 'px', height: settings.height + 'px', margin: "unsert" }, 300, function () {
$(".h-max", $content).show();
$(".h-normal", $content).hide();
p._calcSize();
if ($.isFunction(settings.maxCallback))
settings.maxCallback.call(settings);
});
//$content.css({ width: settings.width + 'px', height: settings.height + 'px', margin: "unsert" });
return p;
}
//切换最大化
this.toggle = function () {
if (p._dialogStatus == 0) {
p.max();
}
else if (p._dialogStatus == 1) {
p.normal();
}
}
this.updateTitle = function (title)
{
$(".modal-title", $modal).text(title);
}
//计算高度
this._calcSize = function () {
//计算高度
var $modal_body = $(".modal-body", $content),
$modal_header = $(".modal-header", $content),
$modal_footer = $(".modal-footer", $content);
var headerH = $modal_header && $modal_header.length > 0 ? $modal_header[0].offsetHeight : 0,
footerH = $modal_footer && $modal_footer.length > 0 ? $modal_footer[0].offsetHeight : 0;
$modal_body.css({
height: $content.height() - headerH - footerH + "px"
});
}
}
var d = new dialog();
return d;
}
网友评论