封裝的dialog插件 基于bootstrap模態(tài)對(duì)話框的簡(jiǎn)單擴(kuò)展
在使用bootstrap 模態(tài)對(duì)話框時(shí)需要在頁(yè)面寫對(duì)話框html,如果一個(gè)頁(yè)面有許多地方需要對(duì)話框,那意味著需要寫多個(gè),感覺很麻煩,平時(shí)不太習(xí)慣bootstrap 模態(tài)對(duì)話框這種方式,所以做了個(gè)簡(jiǎn)單封裝及擴(kuò)展,增加了自定義標(biāo)題,寬度和高度,并根據(jù)寬高居中顯示。
默認(rèn)屬性:
id:"modal",//彈窗id
title:"dialog",//彈窗標(biāo)題
width:"600",//彈窗寬度,暫時(shí)不支持%
height:"500",//彈窗高度,不支持%
backdrop:true,//是否顯示遮障,和原生bootstrap 模態(tài)框一樣
keyboard:true,//是否開啟esc鍵退出,和原生bootstrap 模態(tài)框一樣
remote:"",//加載遠(yuǎn)程url,和原生bootstrap 模態(tài)框一樣
openEvent:null,//彈窗打開后回調(diào)函數(shù)
closeEvent:null,//彈窗關(guān)閉后回調(diào)函數(shù)
okEvent:null//單擊確定按鈕回調(diào)函數(shù)
使用方法:
1.通過(guò)html data-*屬性定義
2.通過(guò)js初始化
$(".mzDialog").mzDialog();
不完善的地方及bug,這里只是學(xué)習(xí)參考,自己可以修改完善
1、bootstrap-mzDialog 插件暫時(shí)只有2個(gè)按鈕,取消和確定,暫不支持自定義按鈕,自己可以修改源代碼添加此功能。
2、只能使用html data-*方式定義,不支持js初始化時(shí)配置參數(shù),自己可以修改源碼擴(kuò)展此功能。
3、寬度和高度建議不要使用百分比
4、注意這里回調(diào)函數(shù)必需是字符串格式,如okEvent:”ok()” 這里ok函數(shù)式自己定義的函數(shù),切記要帶();
js源碼:
/*------------------------------------------------------ *封裝的dialog插件,基于bootstrap模態(tài)窗口的簡(jiǎn)單擴(kuò)展 *作者:muzilei *email:530624206@qq.com ----------------------------------------------------------*/ (function ($) { $.fn.mzDialog = function () { var defaults={ id:"modal",//彈窗id title:"dialog",//彈窗標(biāo)題 width:"600",//彈窗寬度,暫時(shí)不支持% height:"500",//彈窗高度,不支持% backdrop:true,//是否顯示遮障,和原生bootstrap 模態(tài)框一樣 keyboard:true,//是否開啟esc鍵退出,和原生bootstrap 模態(tài)框一樣 remote:"",//加載遠(yuǎn)程url,和原生bootstrap 模態(tài)框一樣 openEvent:null,//彈窗打開后回調(diào)函數(shù) closeEvent:null,//彈窗關(guān)閉后回調(diào)函數(shù) okEvent:null//單擊確定按鈕回調(diào)函數(shù) }; //動(dòng)態(tài)創(chuàng)建窗口 var creatDialog={ init:function(opts){ var _self=this; //動(dòng)態(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);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap 模態(tài)對(duì)話框只加載一次 remote 數(shù)據(jù)的完美解決辦法
- Bootstrap模態(tài)對(duì)話框的簡(jiǎn)單使用
- Bootstrap3 多個(gè)模態(tài)對(duì)話框無(wú)法顯示的解決方案
- BootStrap3中模態(tài)對(duì)話框的使用
- Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)
- 基于Bootstrap模態(tài)對(duì)話框只加載一次 remote 數(shù)據(jù)的解決方法
- Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法
- Bootstrap模態(tài)對(duì)話框用法簡(jiǎn)單示例
相關(guān)文章
js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié)
這篇文章主要介紹了JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能,結(jié)合實(shí)例形式分析了微信小程序picker組件進(jìn)行日期與時(shí)間選擇的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12微信小程序全局變量的設(shè)置、使用、修改過(guò)程解析
這篇文章主要介紹了微信小程序全局變量的設(shè)置、使用、修改過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09詳解js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實(shí)現(xiàn)的進(jìn)度條,可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程)2009-07-07JavaScript函數(shù)this指向問(wèn)題詳解
這篇文章主要為大家介紹了JavaScript函數(shù)this指向,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11