對bootstrap modal的簡單擴展封裝

對bootstrap modal的簡單擴展封裝

參考自：http://www.muzilei.com/archives/677   注：原文不支持bootstrap新版本，而且居中等存在問題

　　此段時間一直在學習bootstrap,主要是用於作後臺，一直習慣用easyui，ui，jgrid前端框架，以致於並不習慣bootstrap的風格。近來考慮到easyui性能不太好，就用了bootstrap,先說下我所瞭解的bootstrap. 1.外國的框架用於顯示中文看着老是不妥. 2.默認的樣式以爲有些鬆散；好比表格，必須加上table-condensed類才顯得緊湊一些。

　　進入正題，在使用bootstrap 模態對話框時須要在頁面寫對話框html，若是一個頁面有許多地方須要對話框，那意味着須要寫多個，感受很麻煩，平時不太習慣bootstrap 模態對話框這種方式，因此作了個簡單封裝及擴展，增長了自定義標題，寬度和高度，並根據寬高居中顯示

 

　　調用代碼

1             <a class="mzDialog" href="#" data-remote="/AccountingPeriod/Init" data-mtitle="哈哈" data-id="m1" data-width="600" data-height="500" data-backdrop=false data-okevent="ok()" data-openevent="open()">彈窗demo</a>

　

        $(".mzDialog").wwDialog();

　　目前只支持以data-屬性調用，不支持以js方式調用，歡迎你們擴展一下哦

　　參數介紹

 1 id:"modal",//彈窗id
 2 title:"dialog",//彈窗標題
 3 width:"600",//彈窗寬度，暫時不支持%
 4 height:"500",//彈窗高度,不支持%
 5 backdrop:true,//是否顯示遮障，和原生bootstrap 模態框同樣
 6 keyboard:true,//是否開啓esc鍵退出，和原生bootstrap 模態框同樣
 7 remote:"",//加載遠程url，和原生bootstrap 模態框同樣
 8 openEvent:null,//彈窗打開後回調函數
 9 closeEvent:null,//彈窗關閉後回調函數
10 okEvent:null//單擊肯定按鈕回調函數

 

　　下面是源代碼：

  1 /*------------------------------------------------------
  2      *封裝的dialog插件，基於bootstrap模態窗口的簡單擴展
  3      *做者：muzilei
  4      *修改人：lyw 原插件對bootstrap3.3.0不支持
  5      *email:530624206@qq.com
  6 -------------------------------------------------------*/
  7 /*----------------------------------------------------------------------------------------------------
  8 一、bootstrap-wwDialog 插件暫時只有2個按鈕，取消和肯定，暫不支持自定義按鈕，本身能夠修改源代碼添加此功能。
  9 
 10 二、只能使用html data-*方式定義，不支持js初始化時配置參數，本身能夠修改源碼擴展此功能。
 11 
 12 三、寬度和高度建議不要使用百分比
 13 
 14 四、注意這裏回調函數必需是字符串格式，如okEvent:」ok()」 這裏ok函數式本身定義的函數，切記要帶();
 15 ------------------------------------------------------------------------------------------------------*/
 16 (function ($) {
 17     $.fn.wwDialog = function () {
 18         var defaults = {
 19             id: "modal",//彈窗id
 20             title: "dialog",//彈窗標題
 21             width: "600",//彈窗寬度，暫時不支持%
 22             height: "500",//彈窗高度,不支持%
 23             backdrop: false,//是否顯示遮障，和原生bootstrap 模態框同樣
 24             keyboard: true,//是否開啓esc鍵退出，和原生bootstrap 模態框同樣
 25             remote: "",//加載遠程url，和原生bootstrap 模態框同樣
 26             openEvent: null,//彈窗打開後回調函數
 27             closeEvent: null,//彈窗關閉後回調函數
 28             okEvent: null//單擊肯定按鈕回調函數
 29         };
 30 
 31         //動態建立窗口
 32         var creatDialog = {
 33             init: function (opts) {
 34                 var _self = this;
 35 
 36                 //動態插入窗口
 37                 var d = _self.dHtml(opts);
 38                 $("body").append(d);
 39 
 40                 var modal = $("#" + opts.id);
 41 
 42                 //初始化窗口
 43                 //modal.modal(opts);                
 44                 modal.modal({
 45                     backdrop: false,
 46                     keyboard: opts.keyboard
 47                 });
 48                 $(".modal-body").load(opts.remote);
 49 
 50                 //窗口大小位置
 51                 var h = modal.height() - modal.find(".modal-header").outerHeight() - modal.find(".modal-footer").outerHeight() - 5;
 52                 //modal.css({ 'margin-left': opts.width / 2 * -1, 'margin-top': opts.height / 2 * -1, 'top': '50%' }).find(".modal-body").innerHeight(h);
 53                 modal.css({
 54                     position: "absolute",
 55                     left: ($(window).width() - opts.width) / 2,
 56                     top: ($(document).height() - opts.height) / 2
 57                 });
 58                 $(".modal-body").css({
 59                     height: opts.height - 115
 60                 });
 61                 modal
 62                 //顯示窗口
 63                 .modal('show')
 64                 //隱藏窗口後刪除窗口html
 65                 .on('hidden', function () {
 66                     modal.remove();
 67                     $(".modal-backdrop").remove();
 68                     if (opts.closeEvent) {
 69                         eval(opts.closeEvent);
 70                     }
 71                 })
 72                 //窗口顯示後
 73                 .on('shown', function () {
 74 
 75                     if (opts.openEvent) {
 76                         eval(opts.openEvent);
 77                     }
 78 
 79 
 80                 });
 81                 //綁定按鈕事件
 82                 $(".ok").click(function () {
 83                     if (opts.okEvent) {
 84                         var ret = eval(opts.okEvent);
 85                         if (ret) {
 86                             modal.modal('hide');
 87                         }
 88                     }
 89                 });
 90             },
 91             dHtml: function (o) {
 92                 return '<div id="' + o.id + '" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" ><div style=" background-color: #000;bottom: 0;left: 0;position: fixed;right: 0;top: 0;transition: opacity 0.15s linear 0s;opacity: 0.5;"></div><div class="modal-dialog" style="display:table-cell"><div class="modal-content" style="width:' + o.width + 'px;height:' + o.height + 'px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 id="myModalLabel" class="modal-title">' + o.title + '</h4></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></div></div>';
 93             }
 94         };
 95 
 96         return this.each(function () {
 97             $(this).click(function () {
 98                 var opts = $.extend({}, defaults, {
 99                     id: $(this).attr("data-id"),
100                     title: $(this).attr("data-mtitle"),
101                     width: $(this).attr("data-width"),
102                     height: $(this).attr("data-height"),
103                     backdrop: $(this).attr("data-backdrop"),
104                     keyboard: $(this).attr("data-keyboard"),
105                     remote: $(this).attr("data-remote"),
106                     openEvent: $(this).attr("data-openEvent"),
107                     closeEvent: $(this).attr("data-closeEvent"),
108                     okEvent: $(this).attr("data-okEvent")
109                 });
110                 $(".modal").remove();
111                 creatDialog.init(opts);
112             });
113         });
114 
115     };
116 
117 })(jQuery);