基础显示最大宽度模态

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

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

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

但是我想不出一个好办法，这样做后，水平居中的弹出窗口。有任何想法吗？

来源

2014-01-16 dougmacklin

想出了一个解决方案，不知道为什么我没有早点想到它。我只是把所有的模式内容到另一个分度以下样式：

.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。

来源

2014-01-22 01:02:27 dougmacklin

这实际上不能在小屏幕上工作，这里是我可以说的叉为sass版本：http://pastebin.com/E2Ch1t6a –

不知道你的意思是它没有工作。这种解决方案是为了在较大的屏幕上具有最大宽度，在较小的屏幕上，该模式应该仍然是90％的宽度或任何它 – dougmacklin

如果您的图像大小不同，并且您始终希望它们填充模式的整个智慧，您可以尝试CSS3 background-size：contains;将图像缩放到原始大小以外。否则，只需将模式的宽度设置为最小尺寸的图像并使用宽度：100％;.基金会揭示了您应该定制和利用的大小班级。对图像进行定位与它的绝对定位有关，因此您需要覆盖Foundation的风格：

left：0; right 0; margin：auto;

来源

2014-01-17 02:35:05 Smith

我希望图像占据整个模式，但直到他们的950像素宽度的作品，同时保持为中心的模式。你是什么意思将模式的宽度设置为最小尺寸的图像并使用宽度100％？我怎样才能将它设置为两个不同的东西？你可能会尝试更新你的代码小提琴，我不能得到它的工作。 – dougmacklin

这也适用...

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

来源

2014-06-05 15:45:49

基础显示最大宽度模态

回答

相关问题