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

I'm trying to make a bootstrap modal draggable anywhere on the page and when the modal is open, I want the user to be able to continue using the page.

我正试图在页面的任何地方创建一个可拖动的模式可拖动，当模态打开时，我希望用户能够继续使用该页面。

I was able to make the modal draggable with jquery-ui but I'm stuck on making the page usable while the modal is open. Tried several suggestions with CSS but none work quite as I'd like them to.

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

This makes the page usable but the modal is limited to only a part of the page: Bootstrap Modal - make background clickable without closing out modal

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

Same as this one: Enable background when open bootstrap modal popup

与此相同：打开bootstrap模式弹出窗口时启用后台

Is it possible to achieve this with bootstrap modal at all?

是否有可能通过bootstrap模式实现这一点？

This is my JS:

这是我的JS：

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

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

JSFiddle link: https://jsfiddle.net/ntLpg6hw/1/

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

1 个解决方案

#1

This is really cool!

这真的很酷！

I think all you need is a little css.

我想你需要的只是一点点css。

#myModal {
  position: relative;
}

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

You should also add some jQuery to reset your modal position on button click.

您还应该添加一些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"
  });
});

Check out the Fiddle

看看小提琴

Note: Facebook is now doing something similar with external newsfeed videos. If you scroll away from a video while watching it, it becomes a drag and drop video.

注意：Facebook现在正在做与外部新闻源视频类似的事情。如果您在观看视频时滚动远离视频，则会变为拖放视频。

Basically, their video popup parent container is position: relative, and the direct child of that container is position: fixed. The same strategy is used here.

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

#1