bootstrap modal 模态框拖拽扩展

Posted 2020-06-13

主管要求bootstrap modal 带有拖拽移动效果.代码如下:

JS

 1 // bootstrap 模态框窗口 移动扩展, 在bootstrap 初始化后 调用
 2 var btModalMoveEx = function () {
 3     function moveEx($this) {
 4         var $head = $this.find(".modal-header"), $dialog = $this.find(".modal-dialog");
 5         var move = {isMove: false, left: 0, top: 0};
 6         $this.on("mousemove", function (e) {
 7             if (!move.isMove) return;
 8             $dialog.offset({top: e.pageY - move.top, left: e.pageX - move.left});
 9         }).on("mouseup", function () {
10             move.isMove = false;
11         });
12         $head.on("mousedown", function (e) {
13             move.isMove = true;
14             var offset = $dialog.offset();
15             move.left = e.pageX - offset.left;
16             move.top = e.pageY - offset.top;
17         });
18     }
19 
20     var old = $.fn.modal;
21     $.fn.modal = function (o, _r) {
22         var $this = $(this);
23         // 标识 是否已经绑定过移动事件了.用于防止重复绑定
24         if (!$this.attr("isbindmv")){
25             $this.attr("isbindmv", "1");
26             moveEx($this);
27         }
28         return old.call(this, o, _r);
29     };
30 };

 CSS 

.modal[isbindmv] .modal-header {
    cursor: move;
}

 

使用方式

$(‘#editModal‘).modal({backdrop: ‘static‘});