0

When I open a Bootstrap Dialog and drags it around by using jQuery's draggable function, I drag the modal-area around too. The problem is if I drag the Dialog down and right 100px, the top and left side of the website isn't modal anymore.

How can I avoid this effect, so everything beside the Dialog always is modal?

I use:

Bootstrap: 3.1.1

jQuery: jquery-2.1.1

jQuery-UI: jQuery-UI.1.11.2.js

Code sample:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
        $("#myModal").draggable({
            handle: ".modal-header"
        });
</script>
radbyx
  • 9,352
  • 21
  • 84
  • 127

1 Answers1

1

I had the wrong mindset. And should have read the jQuery-UI doc first.

Turns out I simply just drag the wrong DOM element around.

Solution:

<script>
    $(".modal-dialog").draggable({
        handle: ".modal-header"
    });
</script>
radbyx
  • 9,352
  • 21
  • 84
  • 127