3

对于模式中的表单，我选择使用引导模式页脚来显示与表单相关的任何错误。当错误不可避免地使页脚占用的高度超过页脚可用的高度时，这会引起一些挫败感。我很好，它需要更多的高度，但我希望它将高度添加到顶部并降低模态主体的高度，以便整个模态保持相同的高度。如果将其添加到底部，则最终会将内容推离屏幕。模态体考虑了太“高”的内容并添加了垂直滚动条，这就是为什么我愿意放弃模态体高度来适应模态页脚高度的原因。

我添加了指向我所指的图像的链接。模态页脚按预期扩展到内容，但将该高度添加到底部，因此模态页脚的其余部分在被推离屏幕时变得不可访问。我想从正文中窃取高度，以便将页脚的附加高度添加到顶部，并且模态的总高度保持相同的大小。

在此处输入图像描述

我确定我还没有找到一个简单的解决方案，但我想我会在继续寻找的同时问一下，以防其他人已经找到了他们想要分享的解决方案。任何帮助将非常感激。提前致谢。

4

1 回答 1

0

通常引导模式使用固定位置。如果内容太大，滚动条会出现在模态框内。

如果您想拥有没有滚动条的长模态，您必须首先将模态定位更改为absolute. 但是，如果您的网站内容很长，则必须添加一些top属性值。这是因为现在 modal 垂直定位到整个站点，而不是当前浏览器视图，所以 % top 将不再起作用。

.modal {
    position: absolute;
    top: 100px;
}

现在滚动你只需使用浏览器滚动条。

接下来要摆脱添加max-height: inherit到modal-body类的模态滚动条。现在，模式将根据没有滚动条的内容变得更大。

.modal .modal-body {
    max-height: inherit;
}

是的，这有一些缺点。最大的问题是，如果您在页面底部启动模式，您甚至可能看不到它，因为它会在页面顶部弹出。对于这个问题，您可以在触发模式后添加 js 滚动顶部脚本。

$('#myModal').on('show', function () {
    $("body").animate({
        scrollTop:0
    });
});

希望有帮助！

于 2013-04-05T10:33:18.777 回答