使bootstrap模式可拖动并保持背景可用 [英] Make bootstrap modal draggable and keep background usable

问题描述

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

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.

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

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.

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

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模式弹出窗口时启用后台

是否可以使用bootstrap模式实现此目的？

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

这是我的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 link: https://jsfiddle.net/ntLpg6hw/1/

推荐答案

这是真的很酷！

我认为你所需要的只是一点点css。

I think all you need is a little css.

#myModal {
  position: relative;
}

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

您还应该添加一些jQuery来重置按钮点击时的模态位置。

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

$('#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

注意： Facebook现在正在做与外部新闻源视频类似的事情。如果您在观看视频的同时滚动视频，它就会成为一个拖放视频。

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.

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

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.

这篇关于使bootstrap模式可拖动并保持背景可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！