JQuery drag and drop with modal boot, scroller weird behavior

Question

I am trying to use bootstrap popup with jquery-ui draggable function. I use it as follows:

// Bootstrap modal $(element).modal({ keyboard: false, show: value }); // Jquery draggable $(element).draggable({ handle: ".modal-header" }); 

But when I try to drag the popup, the scroller is dragged using the popup. Thanks for any progress.

Answer 1

I think you should apply draggable in the .modal-dialog class, see

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</p> </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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> <script> $('.modal').modal({ keyboard: false, show: true }); // Jquery draggable $('.modal-dialog').draggable({ handle: ".modal-header" }); </script> 

Answer 2

Good answer by @Bass Jobsen

However, I felt that sometimes we might need a dynamic change in modality. Thus, here extends the Bass solution for resizable and draggable modal

Addition

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" /> 

and

$('.modal-content').resizable();

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</p> </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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> <script> $('.modal').modal({ keyboard: false, show: true }); // Jquery draggable $('.modal-dialog').draggable({ handle: ".modal-header" }); $('.modal-content').resizable(); </script> 

Alternatively, you can specify minHeight and minWidth

 $('.modal-content').resizable({ minHeight: 100, minWidth: 100 });