bootstrap modalモードボックスドラッグ拡張
2768 ワード
主管はbootstrap modalにドラッグ移動効果を要求した.コードは次のとおりです.
JS
CSS
使用方法
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'});