使用jQuery UI问题使Bootstrap模式可调整大小

Question

所以我已经创建了一个Bootstrap模式，我正在尝试使用jquery使其可调整大小。我有调整大小水平工作，但如果你尝试垂直调整大小，就像模态中的内容不包含在我试图调整大小的元素中。

我尝试使用＆＃39; alsoResize＆＃39; .resizable()上的属性，包括模态中的所有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 就足够了，但事实证明添加样式表是它不适合我的原因。