Jquery có thể kéo với kiểu khởi động, cuộn lại hành vi lạ

Question

Tôi đang cố gắng sử dụng cửa sổ bật lên phương thức khởi động với chức năng kéo jquery-ui. Tôi sử dụng nó như sau:

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

Nhưng khi tôi cố gắng kéo cuộn giấy phải bật lên đang kéo với cửa sổ bật lên. Thx để biết trước.

Answer 1

tôi nghĩ rằng bạn nên áp dụng draggable trên lớp .modal-dialog, xem:

<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

Nice câu trả lời bằng cách @Bass Jobsen

Tuy nhiên tôi cảm thấy rằng đôi khi chúng ta có thể cần phải tự động thay đổi kích thước phương thức. Vì vậy, đây mở rộng giải pháp Bass cho phương thức thay đổi kích thước và kéo

Addition

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

và

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

Hơn nữa, bạn có thể chỉ định minheight và m inWidth

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