封装的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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。