如何限制模态的高度?

Posted

技术标签:

【中文标题】如何限制模态的高度?【英文标题】:How to limit the height of the modal? 【发布时间】:2015-05-01 18:04:15 【问题描述】:

我正在寻找一种将模态对话框保持在屏幕范围内的方法,即它的高度始终小于屏幕高度,并且宽度会相应调整。我试过了:

.modal-dialog 
  max-height: 100%;

但这似乎没有任何效果。

http://jsfiddle.net/ma4zn5gv/

插图:

如果存在,我更喜欢纯 CSS 解决方案(无 js)。为清楚起见,我正在寻找最大高度,而不是高度(即模态是否不高于屏幕,保持原样)。

【问题讨论】:

有什么理由不使用别人的 jQuery 插件?谷歌搜索“响应式模式”会出现很多选项,我 99% 确信其中一个会满足您的需求 【参考方案1】:

定位modal-body 而不是modal-dialog

将以下内容添加到您的 CSS:

max-height: 80vh;
overflow-y: auto;

应该是这样的:

.modal-body 
    max-height: 80vh; overflow-y: auto;

根据喜好调整 VH 高度。

【讨论】:

是什么原因需要模态体而不是整个元素,包括模态页眉和页脚? 只是基于我自己的实验的猜测,但整个模态可以作为目标。不同之处在于页眉和页脚不会“粘”在顶部和底部(它会随着内容滚动),这可能不是所需的行为。此外,定位 modal-content 不会“缩小”内容的视口,因为默认情况下它是 display:flex。【参考方案2】:

将viewport units 与calc 一起使用。像这样:

.img-responsive 
    max-height: calc(100vh - 225px);

...其中 225px 对应于对话框周围视口顶部和底部的组合高度。

此外,为了处理模态框的宽度,我们需要设置更多属性:

.modal 
    text-align:center;

.modal-dialog 
    display: inline-block;
    width: auto;

Updated Fiddle(调整视口高度看效果)


或者:

我们可以用填充 + 负边距技术替换 calc,如下所示:

.img-responsive 
    max-height: 100vh;
    margin: -113px 0;
    padding: 113px 0;

FIDDLE

PS:浏览器对视口单元的支持是very good

【讨论】:

哇哦。我不知道浏览器支持变得多么好 - 对于视口单元以及 calc()。 我不喜欢 calc 的图片。有没有可能摆脱它? 您可以使用小于 100vh(视口的全高)的值,例如 90vh,尽管这会因设备而异.. @georg 我用不使用 calc 的方法更新了答案 原谅我的无知,但是第一个解决方案中的 225px 来自哪里,第二个解决方案中的 113px 是什么?如果我更改字体和边距,我应该重新计算这些数字吗?【参考方案3】:

由于默认值设置为自动,宽度和高度为 100%。你只能修改;视口内的图像和目标ID,如下:

/*let target has the same value as modal-dialog*/
#myModal 
    width:auto;
    height:auto;
    margin:0 auto;

/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img  /*same value to avoid overwidth*/
    width:70%;
    height:70%;
    margin:0 auto;

这是 jsfiddle 中的 DEMO

你也可以把它分成如下:

.modal-dialog img 
    width:100%;
    height:100%;
    margin:0 auto;

.modal-dialog /*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
    width:60%;
    height:60%;
    margin:0 auto;

更新DEMO

【讨论】:

如果你把图片设置成img-responsive,上面代码中.modal-dialog img的变化不会导致宽高显示不好【参考方案4】:

先固定容器大小,再设置模态对话框大小。

例如:

.modalheight:100%;width:50%;margin: 0 auto;
.modal-dialogoverflow:hidden; max-height:96%;

Fiddle

【讨论】:

【参考方案5】:

尝试对 Fiddle 进行一些 css 更改。

css:

.modal-dialog 
 height: 100%;
 margin: 0;
 padding: 10px;

.modal-content  height:100%; 
.modal-body 
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;

.modal-body > p 
height: 100%;
margin: 0;

.img-responsive
max-height: 100%;
max-width: 100%;
margin:auto;

.modal-footer 
position: absolute;
bottom: 0;
left: 0;
right: 0;

【讨论】:

图像转向左侧:p OP 需要限制模态对话框,而不是图像:D【参考方案6】:

脚本

$('#myModal').on('show.bs.modal', function () 
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
);

Fiddle

【讨论】:

【参考方案7】:

如果您将 max-height 和 max-width 设置为 100%,那么它会自动占用相应的屏幕,但是如果您希望此对话框尺寸更小,则您必须将 max-height 和 max-width 设置为某个固定值。 由于您已经使用了响应式模型对话框,因此它会根据您的屏幕大小自动更改对话框大小。

尝试遵循 css,它可能会根据您的要求工作。您可以相应地更改 max-height 和 max-width,margin-left 和 margin-right 用于居中对齐。

 .modal-dialog 
      max-height: 225px;
      max-width:  200px; 
      margin-left: auto;
      margin-right: auto;
    

希望对你有帮助!!

【讨论】:

你能发个小提琴吗?【参考方案8】:

我认为您应该在 .modal-dialog 上使用溢出:隐藏,并使用一种样式来保持图像比例。

【讨论】:

你能发个小提琴吗? 不幸的是,你是对的,这比我想象的要难!我已经尝试了一段时间没有成功,对不起......但这也许有帮助:appendto.com/2014/03/responsive-approach-image-scaling-css【参考方案9】:

如果您确保父元素设置了高度,那么您应该可以很容易地做到这一点。我给了页眉和页脚 10% 的高度和 80% 的主体,所以它们加起来是 100 :)

.modal, .modal-dialog, .modal-content
  height: 100%;


.modal-header, .modal-footer height:10%;
.modal-body height:80%;
.img-responsive 
    max-height:100%;

【讨论】:

图片在 Chrome 和 Firefox 中仍然扩展出模型:jsFiddle 对不起。该段落还必须具有 100% 的高度。我在这里更新了代码。 jsFiddle.modal-content p height: 100%; 另外,如果模态的最外层父级设置为最大高度,那么模型也应该挤在其中。这一切都是为了确保所有最顶层的父级都设置为仅与浏览器一样高。

以上是关于如何限制模态的高度?的主要内容,如果未能解决你的问题,请参考以下文章

单个模态的离子3模态全屏宽度/高度?

TornadoFX 模态对话框不会自动调整高度

引导模态高度上的转换不起作用

反应原生:无法将自定义高度设置为模态

如何限制可拖动滚动表根据其子高度在颤动中获取高度?

如何使用 NSLayoutConstraint 限制 UIButton 的高度