Bootstrap的modal拖動效果
更新時間:2016年12月25日 17:55:11 作者:MullerToSuccess
本文通過實例代碼給大家介紹了bootstrap的modal拖動效果,非常不錯,代碼簡單易懂,具有參考借鑒價值,需要的朋友參考下吧
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
(function(){ function moveModal($this){ var $head = $this.find('.modal-header'); var $dialog = $this.find('.modal-dialog'); var move = { isMove: false, left: 0, top: 0 }; //委托 console.log('點擊的是',$this); $this.on('mousemove', function(e){ if(!move.isMove) return; console.log('移動的是', e.target); $dialog.offset({ top: e.pageY - move.top, left: e.pageX - move.left }); }).on('mouseup', function(e){ move.isMove = false; }); $head.on('mousedown', function(e){ move.isMove = true; var offset = $dialog.offset(); move.left = e.pageX - offset.left; move.top = e.pageY - offset.top; }); } var oldModal = $.fn.modal; $.fn.modal = function(o, _r){ var $this = $(this); if(!$this.attr('ifbindmv')){ $this.attr('isbindmv','1'); moveModal($this); } return oldModal.call(this, o, _r); } ////要拖動的div背景 //$('#showErr').modal({backdrop: 'static'}); })();
以上所述是小編給大家介紹的Bootstrap的modal拖動效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07防止動態(tài)加載JavaScript引起的內(nèi)存泄漏問題
利用Script標簽可以跨域加載并運行一段JavaScript腳本, 但Neil Fraser先前已指出,腳本運行后資源并沒被釋放,即使是Script標簽移除后。2009-10-10JavaScript setinterval延遲一秒解決方案
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果
這篇文章主要介紹了JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果,通過簡單的div+css布局結(jié)合JavaScript切換頁面樣式實現(xiàn)美觀的選項卡效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10