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