封装的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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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取整数函数常用的四种方法小结
2012/07/05 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
React简单介绍
2017/05/24 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python实现一次创建多级目录的方法
2015/05/15 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python 绘制场景热力图的示例
2020/09/23 Python
用python发送微信消息
2020/12/21 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
怎样声明子类
2013/07/02 面试题
EJB实例的生命周期
2016/10/28 面试题
四种会话跟踪技术
2015/05/20 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
车间调度岗位职责
2013/11/30 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
文明学生事迹材料
2014/01/29 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
公司给客户的感谢信
2015/01/23 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
2015学校年度工作总结
2015/05/11 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android