在使用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 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+'" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div><button type="button" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">'+o.title+'</h3></div><div><p>正在加載...</p></div><div><button data-dismiss="modal" aria-hidden="true">取消</button><button>確定</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);以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。