Jquery 可拖動引導模式，滾動條奇怪的行為

Question

我正在嘗試使用具有 jquery-ui 可拖動功能的引導模式彈出窗口。 我這樣使用它：

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

但是，當我嘗試拖動彈出窗口時，右滾動條正在與彈出窗口一起拖動。 感謝任何預付款。

Answer 1

我認為您應該在.modal-dialog類上應用draggable ，請參見：

 <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

@巴斯·喬布森的好答案

但是我覺得有時候我們可能需要動態調整模式的大小。 因此，這里擴展了Bass的可調整大小和可拖動模式的解決方案

加成

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

和

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

此外，您可以指定minHeight和minWidth

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

Answer 3

<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. false }): // Jquery draggable $('.modal-dialog');draggable({ handle: ".modal-header" }); </script>