Bootstrap的modal拖动效果

网友投稿 208 2023-06-23


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('mrmKAOyouseup', 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 - ormKAOyffset.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拖动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的rmKAOy。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:ES6概念 ymbol.for()方法
下一篇:JDBC增删改查和查唯一的完整代码解析
相关文章

 发表评论

暂时没有评论,来抢沙发吧~