Jquery przeciągalne z modem początkowym, dziwne zachowanie przewijaka

Question

Próbuję użyć wyskakującego modału podręcznego z jquery-ui funkcją przeciągania. używam go tak:

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

Ale gdy próbuję przeciągnąć okienko prawo scroller jest przeciąganie popup. Thx za jakiekolwiek zaliczki.

Answer 1

myślę, że należy zastosować draggable od klasy .modal-dialog patrz:

<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

Nicea odpowiedź przez @Bass Jobsen

Jednak czułem, że czasami może musimy dynamicznie zmień rozmiar modalu. Więc tutaj rozszerzenie rozwiązania bas za resizable i Draggable modalnym

Dodawanie

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

i

$('.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>

Ponadto, można określić minHeight i m inWidth

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