首页 / 脚本样式 / JavaScript / 封装的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.通过html data-*属性定义
复制代码 代码如下:<a class="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、只能使用html data-*方式定义，不支持js初始化时配置参数，自己可以修改源码扩展此功能。
3、宽度和高度建议不要使用百分比
4、注意这里回调函数必需是字符串格式，如okEvent:”ok（）” 这里ok函数式自己定义的函数，切记要带（）;
js源码：

/*------------------------------------------------------ *封装的dialog插件，基于bootstrap模态窗口的简单扩展 *作者：muzilei *email:530624206@qq.com----------------------------------------------------------*/（function （$） {$.fn.mzDialog = function （） { var defaults={ id:"modal",//弹窗idtitle:"dialog",//弹窗标题width:"600",//弹窗宽度，暂时不支持%height:"500",//弹窗高度,不支持%backdrop:true,//是否显示遮障，和原生bootstrap 模态框一样keyboard:true,//是否开启esc键退出，和原生bootstrap 模态框一样remote:"",//加载远程url，和原生bootstrap 模态框一样openEvent:null,//弹窗打开后回调函数closeEvent:null,//弹窗关闭后回调函数okEvent:null//单击确定按钮回调函数 }; //动态创建窗口 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">×</button><h3 id="myModalLabel">"+o.title+"</h3></div><div class="modal-body"><p>正在加载...</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">取消</button><button class="btn btn-primary ok">确定</button></div></div>";} };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）;

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