快捷導(dǎo)航

封裝的dialog插件基于bootstrap模態(tài)對話框的簡單擴展

更新時間：2016年08月10日 10:37:40 作者：muzilei

這篇文章主要介紹了基于bootstrap模態(tài)對話框的簡單擴展，bootstrap-mzDialog插件的封裝，感興趣的小伙伴們可以參考一下

在使用bootstrap 模態(tài)對話框時需要在頁面寫對話框html，如果一個頁面有許多地方需要對話框，那意味著需要寫多個，感覺很麻煩，平時不太習(xí)慣bootstrap 模態(tài)對話框這種方式，所以做了個簡單封裝及擴展，增加了自定義標題，寬度和高度，并根據(jù)寬高居中顯示。

默認屬性：
id:"modal",//彈窗id
title:"dialog",//彈窗標題
width:"600",//彈窗寬度，暫時不支持%
height:"500",//彈窗高度,不支持%
backdrop:true,//是否顯示遮障，和原生bootstrap 模態(tài)框一樣
keyboard:true,//是否開啟esc鍵退出，和原生bootstrap 模態(tài)框一樣
remote:"",//加載遠程url，和原生bootstrap 模態(tài)框一樣
openEvent:null,//彈窗打開后回調(diào)函數(shù)
closeEvent:null,//彈窗關(guān)閉后回調(diào)函數(shù)
okEvent:null//單擊確定按鈕回調(diào)函數(shù)
使用方法：
1.通過html data-*屬性定義

復(fù)制代碼代碼如下:

<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，這里只是學(xué)習(xí)參考，自己可以修改完善
1、bootstrap-mzDialog 插件暫時只有2個按鈕，取消和確定，暫不支持自定義按鈕，自己可以修改源代碼添加此功能。
2、只能使用html data-*方式定義，不支持js初始化時配置參數(shù)，自己可以修改源碼擴展此功能。
3、寬度和高度建議不要使用百分比
4、注意這里回調(diào)函數(shù)必需是字符串格式，如okEvent:”ok()” 這里ok函數(shù)式自己定義的函數(shù)，切記要帶();
js源碼：

/*------------------------------------------------------
 *封裝的dialog插件，基于bootstrap模態(tài)窗口的簡單擴展
 *作者：muzilei
 *email:530624206@qq.com
----------------------------------------------------------*/
(function ($) {
$.fn.mzDialog = function () {
   var defaults={
   id:"modal",//彈窗id
  title:"dialog",//彈窗標題
  width:"600",//彈窗寬度，暫時不支持%
  height:"500",//彈窗高度,不支持%
  backdrop:true,//是否顯示遮障，和原生bootstrap 模態(tài)框一樣
  keyboard:true,//是否開啟esc鍵退出，和原生bootstrap 模態(tài)框一樣
  remote:"",//加載遠程url，和原生bootstrap 模態(tài)框一樣
  openEvent:null,//彈窗打開后回調(diào)函數(shù)
  closeEvent:null,//彈窗關(guān)閉后回調(diào)函數(shù)
  okEvent:null//單擊確定按鈕回調(diào)函數(shù)
 };
  
 //動態(tài)創(chuàng)建窗口
 var creatDialog={
 init:function(opts){
  var _self=this;
  
  //動態(tài)插入窗口
  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);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: