基于bootstrap風(fēng)格的彈框插件
自己寫的一款基于bootstrap風(fēng)格的彈框插件,暫時只有確認(rèn)框、提示框。后續(xù)功能擴展、bug修改再更新。
;(function($){ //默認(rèn)參數(shù) var PARAMS; var DEFAULTPARAMS = { width: 500, title: '提示消息', content: '', okbtn: '確定', cancelbtn: '取消', headerBackground: 'info', vbackdrop: 'static', //默認(rèn)點擊遮罩不會關(guān)閉modal vkeyboard: true, //按esc關(guān)閉modal confirmFn: new Object, cancelFn: new Object }; $.dialog = { confirm: function(params){ $.dialog.initParmas(params); $.dialog.Show('confirm', function(e){ if($.isFunction(PARAMS.confirmFn)){ PARAMS.confirmFn(e); } }, function(f){ if($.isFunction(PARAMS.cancelFn)){ PARAMS.cancelFn(f); } }); }, alert: function(params){ $.dialog.initParmas(params); $.dialog.Show('alert', function(e){ if($.isFunction(PARAMS.confirmFn)){ PARAMS.confirmFn(e); } }, null); }, Show: function(type, confirmCaller, cancelCaller){ var html = '<div class="modal fade" id="tipModal">' + '<div class="modal-dialog" style="width:'+PARAMS.width+'px"><div class="modal-content">' + '<div class="modal-header header_'+PARAMS.headerBackground+'">' + '<a class="close" data-dismiss="modal">×</a>' + '<h4 class="modal-title text-center">'+PARAMS.title+'</h4></div>' + '<div class="modal-body text-center body_content">'+PARAMS.content+'</div>' + '<div class="modal-footer">'; if(type=='confirm'){ html += '<button class="btn btn-default" id="btnCancel">'+PARAMS.cancelbtn+'</button>'; } html += '<button class="btn btn-primary" id="btnOk">'+PARAMS.okbtn+'</button>'; html += '</div></div></div></div>'; $('body').append(html); $('#tipModal').modal({backdrop:PARAMS.vbackdrop,keyboard:PARAMS.vkeyboard}); $.dialog.setDialogEvent(type, confirmCaller, cancelCaller); }, initParmas: function(params){ if(params!= undefined && params!= null){ PARAMS = $.extend({}, DEFAULTPARAMS, params); } }, setDialogEvent: function(type, confirmCaller, cancelCaller){ switch(type){ case 'confirm': $("#btnOk").click(function(){ $('#tipModal').modal('hide'); $('#tipModal').on('hidden.bs.modal', function(){ $('#tipModal').remove(); //要先remove modal if($.isFunction(confirmCaller)){ confirmCaller(true); } }); }); $("#btnCancel").click(function(){ $('#tipModal').modal('hide'); $('#tipModal').on('hidden.bs.modal', function(){ $('#tipModal').remove(); if($.isFunction(cancelCaller)){ cancelCaller(false); } }); }); break; case 'alert': $("#btnOk").click(function(){ $('#tipModal').modal('hide'); $('#tipModal').on('hidden.bs.modal', function(){ $('#tipModal').remove(); if($.isFunction(confirmCaller)){ confirmCaller(true); } }); }); break; }; $('#tipModal').on('hidden.bs.modal', function(){ $('#tipModal').remove(); }); $("#tipModal .close").click(function(){ $('#tipModal').on('hidden.bs.modal', function(){ $('#tipModal').remove(); }); }); //設(shè)置窗口可拖動 $('#tipModal .modal-header').Draggable($('#tipModal .modal-dialog')); } }; dialogConfirm = function(params){ $.dialog.confirm(params); }; dialogAlert = function(params){ $.dialog.alert(params); }; })(jQuery); //拖動層 ;(function($){ $.fn.extend({ Draggable: function(objMoved){ return this.each(function(){ //鼠標(biāo)按下時的位置 var mouseDownPosiX, mouseDownPosiY; //obj的初始位置 var objPosiX, objPosiY; //鼠標(biāo)移動的距離 var tempX, tempY; //移動的對象 var obj = $(objMoved)==undefined ? $(this): $(objMoved); //是否處于移動狀態(tài) var status = false; $(this).mousedown(function(e){ status = true; mouseDownPosiX = e.pageX; mouseDownPosiY = e.pageY; objPosiX = obj.css("left").replace("px", ""); objPosiY = obj.css("top").replace("px", ""); }).mouseup(function(){ status = false; }); $(document).mousemove(function(e){ if(status){ tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX); tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY); obj.css({ "left": tempX + "px", "top": tempY + "px" }); } //判斷是否超出窗體 //計算出彈出層距離右邊的位置 var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width())); var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height())); var maxLeft = $(window).width()-obj.width(); var maxTop = $(window).height()-obj.height(); if(parseInt(obj.css("left"))<=0){ obj.css("left","0px"); } if(parseInt(obj.css("top"))<=0){ obj.css("top","0px"); } if(dialogRight<=0){ obj.css("left",maxLeft+'px'); } if(dialogBottom<=0){ obj.css("top", maxTop+'px'); } }).mouseup(function(){ status = false; }).mouseleave(function(){ status = false; }); }); } }); })(jQuery)
html頁面中調(diào)用:
<body> <div class="box"> <button class="btn btn-default" id="btn_confirm">確認(rèn)框</button> <button class="btn btn-default" id="btn_cancel">提示框</button> </div> </body> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> <script src="js/dialog.js"></script> <script type="text/javascript"> $(function(){ $("#btn_confirm").click(function(){ dialogConfirm({ width: 500, content: '確定要刪除嗎?', headerBackground: 'info', vbackdrop: true, //默認(rèn)點擊遮罩不會關(guān)閉modal vkeyboard: true, //按esc關(guān)閉modal confirmFn: function(e){ dialogAlert({ width: 300, content: 'true', headerBackground: 'success', vbackdrop: 'static', //默認(rèn)點擊遮罩不會關(guān)閉modal vkeyboard: true //按esc關(guān)閉modal }); }, cancelFn: function(f){ alert(f); } }) }); $('#btn_cancel').click(function(){ dialogAlert({ width: 300, content: '刪除成功!', headerBackground: 'error', vbackdrop: 'static', //默認(rèn)點擊遮罩不會關(guān)閉modal vkeyboard: true, //按esc關(guān)閉modal }); }); }); </script>
感覺寫的不是很好,后面修改了或者擴展了功能再更新。源碼會上傳到文件。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap和Angularjs配合自制彈框的實例代碼
- JS組件Bootstrap實現(xiàn)彈出框和提示框效果代碼
- Bootstrap每天必學(xué)之彈出框(Popover)插件
- Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解
- BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
- 簡介BootStrap model彈出框的使用
- Bootstrap實現(xiàn)彈性搜索框
- Bootstrap實現(xiàn)帶動畫過渡的彈出框
- JS組件Bootstrap實現(xiàn)彈出框效果代碼
- bootstrap modal彈出框的垂直居中
相關(guān)文章
JS加密插件CryptoJS實現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實現(xiàn)的Base64加密,結(jié)合實例形式分析了CryptoJS進行base64加密的簡單實現(xiàn)技巧,需要的朋友可以參考下2018-08-08詳解js的延遲對象、跨域、模板引擎、彈出層、AJAX【附實例下載】
本篇文章主要介紹了JavaScript的延遲對象、跨域、模板引擎、彈出層、AJAX,對其進行示例解析,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12微信小程序scroll-view組件實現(xiàn)滾動動畫
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實現(xiàn)滾動動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-01-01基于javascript實現(xiàn)最簡單的選項卡切換效果
這篇文章主要介紹了基于javascript實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05原生JavaScript寫出Tabs標(biāo)簽頁的實例代碼
這篇文章主要介紹了原生JavaScript寫出Tabs標(biāo)簽頁的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07vscode工具函數(shù)idGenerator使用深度解析
這篇文章主要為大家介紹了vscode工具函數(shù)idGenerator使用深度解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03