使引导模式可拖动并保持背景可用

Question

我正在尝试使引导模式可拖动到页面上的任何位置，并且当模式打开时，我希望用户能够继续使用该页面。

我能够使用 jquery-ui 使模式可拖动，但我坚持在模式打开时使页面可用。尝试了一些 CSS 的建议，但没有一个能像我希望的那样工作。

这使得页面可用，但模式仅限于页面的一部分：Bootstrap Modal - 使背景可点击而不关闭模式

与此相同：打开引导程序模式弹出窗口时启用背景

是否可以通过引导模式来实现这一点？

这是我的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/

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"
  });
});

---

查看小提琴

---

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

基本上，他们的视频弹出父容器是

position: relative

，该容器的直接子容器是

position: fixed

。这里使用相同的策略。

Answer 2

Bootstrap Modals 或任何 z 索引元素的简单解决方案

不需要任何第三个插件。

https://gist.github.com/omansak/8b56f98c582f04e1350180f5d467194a#file-bootstrap-draggable-modal-js