Make bootstrap modal draggable and keep background usable : <p>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.</p>

<p>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.</p>

<p>This makes the page usable but the modal is limited to only a part of the page: <a href="https://stackoverflow.com/questions/34095636/bootstrap-modal-make-background-clickable-without-closing-out-modal">Bootstrap Modal - make background clickable without closing out modal</a></p>

<p>Same as this one: <a href="https://stackoverflow.com/questions/35388375/enable-background-when-open-bootstrap-modal-popup">Enable background when open bootstrap modal popup</a></p>

<p>Is it possible to achieve this with bootstrap modal at all?</p>

<p>This is my JS:</p>

<pre><code>$('#btn1').click(function() {
    var modalDiv = $('#myModal');
    modalDiv.modal({backdrop: false, show: true});

    $('.modal-dialog').draggable({
      handle: ".modal-header"
    });
});
</code></pre>

<p>JSFiddle link: <a href="https://jsfiddle.net/ntLpg6hw/1/" rel="noreferrer">https://jsfiddle.net/ntLpg6hw/1/</a></p>
