具有最大宽度的基础显示模态答案

【问题标题】：Foundation Reveal Modal with Max-Width具有最大宽度的基础显示模态
【发布时间】：2014-02-06 03:41:00
【问题描述】：

我正在使用Foundation 框架，特别是reveal 插件，以便在单击按钮后将弹出窗口滑入视图。这将包含一张我想填满整个弹出窗口的图像。

这很有效，除非窗口大小比图像宽，在这种情况下，图像不再填满整个弹出窗口。我可以通过覆盖一些 CSS 来解决这个问题：

.reveal-modal {
    padding: 0;
    max-width: 950px; /* always will be maximum image width */
    background: transparent;
}

但是，在执行此操作后，我想不出一个在窗口中水平居中弹出窗口的好方法。有什么想法吗？

【问题讨论】：

标签： css popup responsive-design modal-dialog zurb-foundation

【解决方案1】：

如果您的图像大小不同，并且您总是希望它们填充模态框的整个宽度，您可以尝试 CSS3 background-size:contain;将图像缩放到超出其原始大小。否则只需将模态的宽度设置为最小尺寸的图像并使用 width:100%;。 Foundation 显示具有您应该自定义和利用的大小类。图像居中与绝对定位有关，因此您需要使用以下命令覆盖 Foundation 的样式：

左：0；右 0; 边距：自动；

【讨论】：

我希望图像占据整个模态，但仅在它们的宽度为 950 像素之前，同时保持模态居中。你是什么意思将模态的宽度设置为最小尺寸的图像并使用宽度 100%？我怎样才能将它设置为两个不同的东西？你能不能试着用你的代码更新小提琴，我不能让它工作。

【解决方案2】：

想出了一个解决方案，不知道为什么我之前没有想到它。我只是将modal中的所有内容放到另一个div中，样式如下：

.reveal-modal-inner {
    margin: 0 auto;
    position: relative;
    max-width: 950px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

完美运行，这里是updated fiddle。

【讨论】：

这实际上不适用于小屏幕，这是我的 sass 版本的 fork：pastebin.com/E2Ch1t6a
不确定您所说的它不起作用是什么意思。此解决方案适用于在较大屏幕上设置最大宽度，在较小屏幕上，模式仍应为 90% 宽度或其他任何值

【解决方案3】：

这也有效...

// styling to make reveal-modal have a max-width

.reveal-modal {
    padding: 0;
    background: transparent;
    border: 0px;
    @include box-shadow(none);
}

.reveal-modal-inner {
    padding: 1.25rem;
    margin: 0 auto;
    position: relative;
    max-width: 650px;
    @include box-shadow(0 0 10px rgba(0,0,0,0.4));
    background-color: white;
}

@media #{$medium-up} {
  .reveal-modal-inner {
    padding: 1.875rem;
  }
}

...这里我使用 compass 来处理 box-shadow 生成和 Foundation 的 scss 断点。显然，这种情况下的最大宽度为 650 像素，但您可以将其增加到适合您的情况。内部模态背景设置为白色，以便您可以看到您的内容/段落/表单/等。

希望对基础 5.1 有帮助

【讨论】：