Bootstrap的modal拖动效果
程序员文章站
2022-07-09 20:11:03
废话不多说了,直接给大家贴代码了,具体代码如下所示:
(function(){
function movemodal($this){
var $h...
废话不多说了,直接给大家贴代码了,具体代码如下所示:
(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拖动效果,希望对大家有所帮助
下一篇: 安卓开发笔记(三十):自定义Button
推荐阅读
-
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
-
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
-
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
-
详解bootstrap的modal-remote两种加载方式【强化】
-
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
-
jQuery实现的手动拖动控制进度条效果示例【测试可用】
-
Bootstrap提示框效果的实例代码
-
bootstrap modal+gridview实现弹出框效果
-
jQuery实现拖动效果的实例代码
-
bootstrap table实现iview固定列的效果