對bootstrap modal的簡單擴展封裝css
參考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,而且居中等存在問題html
此段時間一直在學習bootstrap,主要是用於作後臺,一直習慣用easyui,ui,jgrid前端框架,以致於並不習慣bootstrap的風格。近來考慮到easyui性能不太好,就用了bootstrap,先說下我所瞭解的bootstrap. 1.外國的框架用於顯示中文看着老是不妥. 2.默認的樣式以爲有些鬆散;好比表格,必須加上table-condensed類才顯得緊湊一些。前端
進入正題,在使用bootstrap 模態對話框時須要在頁面寫對話框html,若是一個頁面有許多地方須要對話框,那意味着須要寫多個,感受很麻煩,平時不太習慣bootstrap 模態對話框這種方式,因此作了個簡單封裝及擴展,增長了自定義標題,寬度和高度,並根據寬高居中顯示
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方式調用,歡迎你們擴展一下哦app
參數介紹框架
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//單擊肯定按鈕回調函數
下面是源代碼:ide
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">×</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);