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


Posted in Javascript onAugust 10, 2016

在使用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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
JS实现放大镜效果
Sep 21 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 #Javascript
基于JavaScript实现树形下拉框
Aug 10 #Javascript
关于原生js中bind函数的简单实现
Aug 10 #Javascript
Mvc提交表单的四种方法全程详解
Aug 10 #Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 #Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 #Javascript
浅谈jQuery中的checkbox问题
Aug 10 #Javascript
You might like
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
详解Typescript里的This的使用方法
2021/01/08 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python制作Windows系统服务
2017/03/25 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python os.access()用法实例
2019/02/18 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
np.dot()函数的用法详解
2020/01/17 Python
通过实例解析python and和or使用方法
2020/11/14 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
家长会主持词
2014/03/26 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS