javascript - Make bootstrap modal draggable and keep background usable

Question

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.

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

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

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

This is my 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/

Answer 1

This is really cool!

I think all you need is a little 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.

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

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.