使用 jQuery UI 問題使 Bootstrap 模態可調整大小

Question

所以我創建了一個 Bootstrap 模式，我正在嘗試使用 jquery 調整它的大小。 我有水平調整大小，但是如果您嘗試垂直調整大小，就像模態內部的內容不包含在我嘗試調整大小的元素中一樣。

我嘗試在.resizable()上使用 'alsoResize' 屬性並將所有 div 包含在模態中，但這似乎會導致其他問題。

$('.modal-content').resizable({
    alsoResize: ".modal-header, .modal-body, .modal-footer"
});

這是我的例子： https : //jsfiddle.net/p7o2mkg4/

Answer 1

你真的做對了一切！ 但是 HTML 元素的默認overflow行為是visible 。 因此，如果父元素的內容溢出，它們就會脫離模態，這看起來不太好！ 因此，您需要將 CSS overflow屬性設置為scroll或hidden以修復小尺寸中斷。 嘗試添加：

.modal-content.ui-resizable {
  overflow: scroll;
}

這將確保在元素溢出時滾動。

鏈接到 JSFiddle： https ://jsfiddle.net/p7o2mkg4/1/

Answer 2

這有效（css）

#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}

Answer 3

如果有人像我一樣偶然發現了這個問題，請確保您同時擁有 jQueryUI.js 和 jQueryUI.css。

我認為只有 jQueryUI.js 就足夠了，但事實證明添加樣式表是它對我不起作用的原因。