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

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.