封装的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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
详解Angular路由之路由守卫
May 10 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
Vue快速实现通用表单验证功能
Dec 05 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
jquery 简单应用示例总结
2013/08/09 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
微信JS接口大全
2016/08/25 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python 图片去噪的方法示例
2019/07/09 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
基于Python绘制个人足迹地图
2020/06/01 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
个人务虚会发言材料
2014/10/20 职场文书
拾金不昧表扬信
2015/01/16 职场文书
教师工作表现自我评价
2015/03/05 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
东京审判观后感
2015/06/01 职场文书
三下乡活动心得体会
2016/01/23 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫