Make Bootstrap Modal Draggable and Keep Background Usable

Make bootstrap modal draggable and keep background usable

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.

Bootstrap Modal - make background clickable without closing out modal

Finally am able to click in the input fields and scroll through the background with a bootstrap modal on the screen. (still not working fully in IE)

.modal-backdrop
  display: none !important
#help
  margin-left: 50%
.modal-backdrop
  display: none !important
body.modal-open
  overflow: visible /* this line allowed form to be scrollable */
.modal-body /* this section allowed form input-fields to be clickable */
  max-height: calc(100vh - 210px)
  overflow-y: auto

bootstrap css - how to make a modal dialog modal without affecting the background

To get rid of the backdrop:

After modal initiation

$('#XXX').modal({show:true});

just trigger the code below

 $('.modal-backdrop').removeClass("modal-backdrop");    

Angular Bootstrap $modal with active background elements

You can simply hide modal overlay with CSS:

.modal-backdrop {
    display: none;
}
.modal {
    left: 50%;
    right: inherit;
    top: 50%;
    bottom: inherit;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

For this also make sure you add backdrop: 'static' to modal configuration to prevent modal close on body click.

Demo: http://plnkr.co/edit/46M6F7BL9FtQqt9WiBuJ?p=preview

How to reset position for popup modal with Bootstrap?

Inside your click handler, you can use JQuery to set the css of the modal like so:

if (!$(".modal.in").length) {
  $(".modal-dialog").css({
    top: 0,
    left: 0
  });
}

This will reset the position of your modal. You can use it before you call your modal in your JavaScript, assuming you are using JS to open your modal.

Try running the snippet below or see this CodePen Demo for an example of this using your modal.

// DOM ready$(function() {  $(".modal-dialog").draggable();  $("#btn1").click(function() {    // reset modal if it isn't visible    if (!$(".modal.in").length) {      $(".modal-dialog").css({        top: 0,        left: 0      });    }    $("#noteModal").modal({      backdrop: false,      show: true    });  });
  $("#noteModal").on("show.bs.modal", function(e) {    var note = $('#btn1').data('note');
    $(e.currentTarget).find('span[name="note"]').html(note);  });});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal to display the Note popup --><div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>        <h4 class="modal-title" id="noteModalLabel">Note</h4>      </div>      <div class="modal-body">        <span name="note" id="note"></span>      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>      </div>    </div>  </div></div>
<button id="btn1" data-note="I am a note. Hello.">Show Modal</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

---

Related Topics