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拖動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
最近有朋友問我node環(huán)境和瀏覽器的區(qū)別這一問題，今天小編就抽空給大家介紹下Node環(huán)境和瀏覽器的區(qū)別，感興趣的朋友一起看看吧2018-08-08
下面小編就為大家?guī)硪黄猨avascript兼容性(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了基于原生js淡入淡出函數(shù)封裝，可兼容IE，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
javascript獲取不重復(fù)的隨機數(shù)的方法比較
js永不重復(fù)隨機數(shù)實現(xiàn)代碼比較2008-09-09
這篇文章主要來和大家一起討論如何利用JavaScript實現(xiàn)一個復(fù)雜功能,該功能可以自動為圖片添加水印,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
防止動態(tài)加載JavaScript引起的內(nèi)存泄漏問題
利用Script標(biāo)簽可以跨域加載并運行一段JavaScript腳本， 但Neil Fraser先前已指出，腳本運行后資源并沒被釋放，即使是Script標(biāo)簽移除后。2009-10-10
JavaScript setinterval延遲一秒解決方案
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果
這篇文章主要介紹了JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果,通過簡單的div+css布局結(jié)合JavaScript切換頁面樣式實現(xiàn)美觀的選項卡效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
添加事件的js方法也很多，有直接加到頁面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽的方法，由于各個瀏覽器對事件冒泡事件監(jiān)聽的機制不同2014-08-08