Bootstrap的modal拖动效果
废话不多说了,直接给大家贴代码了,具体代码如下所示:
(function(){
functionmoveModal($this){
var$head=$this.find('.modal-header');
var$dialog=$this.find('.modal-dialog');
varmove={
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;
varoffset=$dialog.offset();
move.left=e.pageX-offset.left;
move.top=e.pageY-offset.top;
});
}
varoldModal=$.fn.modal;
$.fn.modal=function(o,_r){
var$this=$(this);
if(!$this.attr('ifbindmv')){
$this.attr('isbindmv','1');
moveModal($this);
}
returnoldModal.call(this,o,_r);
}
////要拖动的div背景
//$('#showErr').modal({backdrop:'static'});
})();
以上所述是小编给大家介绍的Bootstrap的modal拖动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短