封装的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 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
seajs下require书写约定实例分析
May 16 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 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中使用XML
2006/10/09 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python线程、进程和协程详解
2016/07/19 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
软件测试题目
2013/02/27 面试题
大学校园活动策划书
2014/02/04 职场文书
店长职务说明书
2014/02/04 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
MySQL root密码的重置方法
2021/04/21 MySQL