在使用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",//弹窗id title:"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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。