封装的dialog插件基于bootstrap模态对话框的简单扩展

发布时间：2020-12-18 00:50:39 所属栏目：安全来源：网络整理

导读：在使用bootstrap 模态对话框时需要在页面写对话框html，如果一个页面有许多地方需要对话框，那意味着需要写多个，感觉很麻烦，平时不太习惯bootstrap 模态对话框这种方式，所以做了个简单封装及扩展，增加了自定义标题，宽度和高度，并根据宽高居中显示。默

在使用bootstrap 模态对话框时需要在页面写对话框html，如果一个页面有许多地方需要对话框，那意味着需要写多个，感觉很麻烦，平时不太习惯bootstrap 模态对话框这种方式，所以做了个简单封装及扩展，增加了自定义标题，宽度和高度，并根据宽高居中显示。

默认属性：

id:"modal",//弹窗id title:"dialog",//弹窗标题 width:"600",//弹窗宽度，暂时不支持% height:"500",//弹窗高度,不支持% backdrop:true,//是否显示遮障，和原生bootstrap 模态框一样 keyboard:true,//是否开启esc键退出，和原生bootstrap 模态框一样 remote:"",//加载远程url，和原生bootstrap 模态框一样 openEvent:null,//弹窗打开后回调函数 closeEvent:null,//弹窗关闭后回调函数 okEvent:null//单击确定按钮回调函数

使用方法：

1.通过html data-*属性定义

代码如下:

2.通过js初始化 $(".mzDialog").mzDialog(); 不完善的地方及bug，这里只是学习参考，自己可以修改完善 1、bootstrap-mzDialog 插件暂时只有2个按钮，取消和确定，暂不支持自定义按钮，自己可以修改源代码添加此功能。 2、只能使用html data-*方式定义，不支持js初始化时配置参数，自己可以修改源码扩展此功能。 3、宽度和高度建议不要使用百分比 4、注意这里回调函数必需是字符串格式，如okEvent:”ok()” 这里ok函数式自己定义的函数，切记要带(); js源码：

//动态创建窗口
var creatDialog={
init:function(opts){
var _self=this;

//动态插入窗口
var d=_self.dHtml(opts);
$("body").append(d);

var modal=$("#"+opts.id);

//初始化窗口
modal.modal(opts);

//窗口大小位置
var h=modal.height()-modal.find(".modal-header").outerHeight()-modal.find(".modal-footer").outerHeight()-5;
modal.css({'margin-left':opts.width/2-1,'margin-top':opts.height/2-1,'top':'50%'}).find(".modal-body").innerHeight(h);

modal
//显示窗口
.modal('show')
//隐藏窗口后删除窗口html
.on('hidden',function () {
modal.remove();
$(".modal-backdrop").remove();
if(opts.closeEvent){
eval(opts.closeEvent);
}
})
//窗口显示后
.on('shown',function () {

if(opts.openEvent){
eval(opts.openEvent);
}

//绑定按钮事件
$(this).find(".ok").click(function(){
if(opts.okEvent){
var ret=eval(opts.okEvent);
if(ret){
modal.modal('hide');
}
}
});

});
},dHtml:function(o){
return '<div id="'+o.id+'" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:'+o.width+'px;height:'+o.height+'px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×<h3 id="myModalLabel">'+o.title+'

正在加载...

<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">取消<button class="btn btn-primary ok">确定';
}
};

return this.each(function () {
$(this).click(function(){
var opts = $.extend({},defaults,{
id:$(this).attr("data-id"),title:$(this).attr("data-mtitle"),width:$(this).attr("data-width"),height:$(this).attr("data-height"),backdrop:$(this).attr("data-backdrop"),keyboard:$(this).attr("data-keyboard"),remote:$(this).attr("data-remote"),openEvent:$(this).attr("data-openEvent"),closeEvent:$(this).attr("data-closeEvent"),okEvent:$(this).attr("data-okEvent")
});

creatDialog.init(opts);
});
});

};

})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

封装的dialog插件 基于bootstrap模态对话框的简单扩展

默认属性：

使用方法：

封装的dialog插件基于bootstrap模态对话框的简单扩展