使Bootstrap弹出框可拖动并保持背景可用。

Question

我正在尝试使Bootstrap模态框可以在页面的任何位置拖动，并且当模态框打开时，我希望用户能够继续使用页面。

我已经能够使用jQuery UI使模态框可拖动，但是我卡在了在模态框打开时让页面可用上。 尝试了几个CSS建议，但没有一个符合我的要求。

这个使页面可用，但模态框仅限于页面的一部分：Bootstrap Modal - make background clickable without closing out modal

和这个也一样：Enable background when open bootstrap modal popup

使用Bootstrap模态框是否可能实现这一点？

这是我的JS：

$('#btn1').click(function() {
    var modalDiv = $('#myModal');
    modalDiv.modal({backdrop: false, show: true});

    $('.modal-dialog').draggable({
      handle: ".modal-header"
    });
});

JSFiddle链接：https://jsfiddle.net/ntLpg6hw/1/

- arie

---

https://jsfiddle.net/ntLpg6hw/2/，您可能需要调整一些位 - Morpheus

@Morpheus，这将使模态框仅在页面的一小部分可拖动，是否可以不限制拖动到特定位置，而是让用户在任何位置拖动它？ - arie

Answer 1

这真的很酷！

我认为你所需要的只是一些CSS。

#myModal {
  position: relative;
}

.modal-dialog {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 10px;
}

你还需要添加一些jQuery代码，在按钮点击时重置模态框的位置。

$('#btn1').click(function() {
  // reset modal if it isn't visible
  if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
      top: 0,
      left: 0
    });
  }
  $('#myModal').modal({
    backdrop: false,
    show: true
  });

  $('.modal-dialog').draggable({
    handle: ".modal-header"
  });
});

---

查看Fiddle

---

注意：Facebook现在也在对外部新闻视频做类似的事情。如果您在观看视频时滚动离开，它将变成一个拖放视频。

基本上，他们的视频弹出父容器是position: relative，直接子代是position: fixed。这里使用了相同的策略。

- Dan Kreiger

---

太好了！ :) 我很高兴它有帮助。 - Dan Kreiger

正如预期的那样工作。非常感谢！ - Buddybear

拖动功能可以使用，但问题是它会卡顿。我的模态容器非常大，有许多输入字段和其他数据。当拖动时会出现卡顿。我希望它能以与鼠标相同的速度移动。 - Najam Us Saqib

背景互动仅限于按钮点击和链接，就像您在演示中展示的那样。但是，如果有任何文本框或选择框，则无法在其中输入或选择。 - Rpant

@NajamUsSaqib 有解决卡顿的方法吗？ - user2402616