Foundation Reveal Modal with Max-Width - css

Question

Here is a fiddle.
I'm using the Foundation framework, specifically the reveal plugin to have a popup window slide into view after a button is clicked. This will contain one image which I want to fill up the entire popup.
This works well unless the window size is wider than the image, in which case the image no longer fills up the entire popup. I can combat this by overriding some CSS:
.reveal-modal {
padding: 0;
max-width: 950px; /* always will be maximum image width */
background: transparent;
}
However I can't figure out a good way to center the popup horizontally in the window after doing this. Any ideas?

Answer 1

Figured out a solution, not sure why I didn't think of it earlier. I just put all of the content in the modal into another div with the following style:
.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);
}
Works perfectly, here is the updated fiddle.

Answer 2

This also works...
// 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;
}
}
...here i've used compass to handle the box-shadow generation and foundation's scss breakpoints. obviously the max-width in this case is 650px but you can increase that to what suits your situation. inner modal background is set to white so you can see your content/paragraphs/forms/etc.
Hope it helps, works with foundation 5.1

Answer 3

If you images vary in size and you always want them to fill the entire witdth of the modal you can try the CSS3 background-size:contain; to scale an image beyond it's native size. Otherwise just set the width of the modal to the smallest sized image and use width:100%;. Foundation reveal has size classes that you should customize and leverage. Centering the image has to do with it's absolute positioning so you will need to override Foundation's style with:
left: 0;
right 0;
margin: auto;