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

在使用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-*属性定义

复制代码 代码如下:弹窗demo

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 '
×
'+o.title+'
正在加载...
取消确定
';
  }
 };
  
  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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。