Javascript 使用jQuery UI问题调整引导模式的大小

因此，我创建了一个引导模式，并尝试使用jquery调整其大小。我有调整工作水平，但如果你试图调整垂直它的模式内的内容不包含在我试图调整大小的元素一样

我尝试在

.resizeable（）

上使用'alsoResize'属性，并在model中包含所有div，但这似乎会导致其他问题

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

下面是我的例子：

这是有效的（css）

---

事实上你做的一切都对！但是HTML元素的默认

溢出

行为是

可见

。因此，如果父元素的内容溢出，它们就会脱离模态，这看起来不太好！因此，您需要将CSS

overflow

属性设置为

scroll

或

hidden

，以修复小尺寸时的中断。尝试添加：

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

这将确保在元素溢出时滚动

---

链接到JSFiddle:

如果有人像我一样偶然发现这个，请确保您同时拥有jQueryUI.js和jQueryUI.css

---

我原以为只有jQueryUI.js就足够了，但事实证明，添加样式表是它不适合我的原因。

谢谢！在我的例子中，如果不需要滚动条，我不希望滚动条显示出来，因此我对此做了一个小的更新。

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