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拖动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
JavaScript详解使用Promise处理回调地狱与async await修饰符
这篇文章主要介绍了JavaScript使用Promise处理回调地狱与async await修饰符,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-07-07
JavaScript setinterval延迟一秒解决方案
这篇文章主要介绍了JavaScript setinterval延迟一秒解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09


最新评论