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處理回調地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調地獄與async?await修飾符,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
防止動態(tài)加載JavaScript引起的內存泄漏問題
利用Script標簽可以跨域加載并運行一段JavaScript腳本, 但Neil Fraser先前已指出,腳本運行后資源并沒被釋放,即使是Script標簽移除后。2009-10-10
JavaScript setinterval延遲一秒解決方案
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果
這篇文章主要介紹了JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果,通過簡單的div+css布局結合JavaScript切換頁面樣式實現(xiàn)美觀的選項卡效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10

