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

Question

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

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

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

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

是否有可能通过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/

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.这里使用相同的策略.