封装的dialog插件 基于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.通过htmldata-*属性定义
<aclass="mzDialog"href="#"data-remote="test.html"data-mtitle="modal1"data-id="m1"data-width="600"data-okEvent="ok()">弹窗demo</a>
2.通过js初始化
$(".mzDialog").mzDialog();
不完善的地方及bug，这里只是学习参考，自己可以修改完善
1、bootstrap-mzDialog插件暂时只有2个按钮，取消和确定，暂不支持自定义按钮，自己可以修改源代码添加此功能。
2、只能使用htmldata-*方式定义，不支持js初始化时配置参数，自己可以修改源码扩展此功能。
3、宽度和高度建议不要使用百分比
4、注意这里回调函数必需是字符串格式，如okEvent:”ok()”这里ok函数式自己定义的函数，切记要带();
js源码：
/*------------------------------------------------------
*封装的dialog插件，基于bootstrap模态窗口的简单扩展
*作者：muzilei
*email:530624206@qq.com
----------------------------------------------------------*/
(function($){
$.fn.mzDialog=function(){
vardefaults={
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//单击确定按钮回调函数
};
//动态创建窗口
varcreatDialog={
init:function(opts){
var_self=this;
//动态插入窗口
vard=_self.dHtml(opts);
$("body").append(d);
varmodal=$("#"+opts.id);
//初始化窗口
modal.modal(opts);
//窗口大小位置
varh=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){
varret=eval(opts.okEvent);
if(ret){
modal.modal('hide');
}
}
});
});
},
dHtml:function(o){
return'<divid="'+o.id+'"class="modalhidefade"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"style="width:'+o.width+'px;height:'+o.height+'px;"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h3id="myModalLabel">'+o.title+'</h3></div><divclass="modal-body"><p>正在加载...</p></div><divclass="modal-footer"><buttonclass="btn"data-dismiss="modal"aria-hidden="true">取消</button><buttonclass="btnbtn-primaryok">确定</button></div></div>';
}
};
returnthis.each(function(){
$(this).click(function(){
varopts=$.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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。