Question

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

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

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

然而，在这样做之后，我无法想出一个将弹出窗口水平放置在窗口中的好方法。有什么想法吗？

Answer 1

想出一个解决方案，不知道为什么我之前没有想到它。我只是将模态中的所有内容放入另一个具有以下样式的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。

Answer 2

这也有效......

// 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;
  }
}

...在这里，我使用指南针处理盒子阴影生成和基础的scss断点。显然，在这种情况下，最大宽度是650px，但你可以增加到适合你的情况。内部模态背景设置为白色，因此您可以看到您的内容/段落/表单/等。

希望它有所帮助，适用于基础5.1

Answer 3

如果图像大小不一，并且您总是希望它们填充模态的整个区域，则可以尝试使用CSS3 background-size：contains;将图像缩放到其原始大小之外。否则只需将模态的宽度设置为最小尺寸的图像，并使用width：100％;。 Foundation揭示了您应该定制和利用的大小类。图像居中与其绝对定位有关，因此您需要使用以下方式覆盖Foundation的样式：

左：0; 对0; margin：auto;

基础显示最大宽度的模态

3 个答案: