在动态添加一些内容后，Bootstrap 5 Modal 在滚动时无法正常工作 - 这导致 Modal 的高度超过了以前

Posted 2023-05-08

【中文标题】在动态添加一些内容后，Bootstrap 5 Modal 在滚动时无法正常工作 - 这导致 Modal 的高度超过了以前

【英文标题】：Bootstrap 5 Modal does not work properly on scroll, after adding some content dynamically - which cause Modal's height exceeds than earlier

【发布时间】：2021-12-24 02:23:20

【问题描述】：

。

让我解释一下！

我通过点击“Add Make”按钮打开了一个引导模式。 模态刚刚正确显示，并且它有一个最多有 5 个输入的表单。

See attached image

注意：仍然模态在滚动时正常工作。

现在我刚刚在这些输入中输入了值。并且有 2 个“文件”类型的输入，我用来上传图像（一个用于“图标”，另一个用于“缩略图”）。而且我还在每个类型文件的输入下方显示这些图像。这是一种预览框，用于显示将要上传的图像。

因为该预览框默认是隐藏的。当我们选择一个文件时，该预览框会与所选图像一起出现。

See attached image

注意：现在，模态高度比以前超出了。并且已经走了 超出窗户高度。现在我们的模态应该随着我们的滚动 windows滚动条滚动。 （这是常见的行为 模态）

但是，就我而言，Modal 没有正确滚动。我只是向下滚动，它会自动向后滚动。

简而言之，在向我的 Bootstrap 模态添加动态内容后，我的模态会出现滚动问题，这会改变模态的动态高度。

我尝试了很多解决方案，但仍然无法解决这个问题。

我尝试了以下方法：

添加溢出-y = auto 添加溢出-y = 滚动

注意：即使已经溢出，我也可以自动设置。

我添加了以下内容

<div class="modal-dialog modal-dialog-scrollable">

但是，还是失败了！

最后，我来发布我的问题！

【参考方案1】：

请记住在提问 Bilal 时包含您的代码。现在，您可以尝试在 html 中添加 .modal-dialog-scrollable 和 .modal-dialog。这将为模态添加一个滚动条。

class=" modal-dialogue modal-dialog-scrollable"

【讨论】：

是的，当然！下次我会在提问时小心代码。非常感谢您的友好回答。我已经尝试过这个解决方案，但未能得到正确的结果。不过，我也面临同样的问题。

实际上，当我打开我的 Modal 时，它的高度不会超过窗口（屏幕）的高度。那时我也不需要任何滚动条。但是，在选择图像后，我会显示该图像的预览。然后模态的高度相应增加。比那个时候，我希望我的 Modal 可以使用滚动条。

好的，所以我现在在质疑自己，想知道如果还使用mobile-diaglue-scrollable，是否不需要出现modal-dialogue。不是 100% 确定，但请试一试。