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