Foundation-sites: Reveal modal positioning?

Do you have a link so we can help figure out what's going on?

Let me get it up and running where you can view and then I'll send you a message with the login details.

Ok, I send you the details in a private message.

I think you set a rule in your css .column, .columns {position: relative;}

The reveal modal is positioned absolute. I don't know why it's not positioned fixed. Possibly to enable scrolling?

So, the absolutely positioned modal is aligning itself to it's first positioned parent ( class="eight columns" ). You could try adding css like this...

.reveal-modal { position:fixed;)

and see if that functions the way you want it

Ok. That's from line 17 of Foundation's grid.css.

ok. i couldn't read your filenames. I'm just a user - not a zurb dev. You could try the fixed thing or unnesting your modal div and putting it at the bottom of the html.

Actually, I switched to ColorBox for the modals and just wanted to report the bug (if it's a bug and not a mistake of mine). Thanks for the help in locating the issue! I spent hours futzing with it but couldn't find the problem.

I'll be honest, I can't follow the behind-the-scenes side of this convo :) Is there a bug in Reveal or was it a conflict with other styles?

The problem is, if you put a reveal-modal inside of a column, the reveal modal aligns to that column instead of aligning to the browser window. I don't know if this is something you can fix or not.

It seems like you could set reveal-modal to position:fixed as a default, but I don't know if you have a reason against it.

Oh, gotcha. Yeah Reveal modals are designed to be placed at the end of the page, not within the layout - we use absolute instead of fixed so you can keep page scrolling (if you want it). Changing that to position:fixed would fix it, though.

Probably best to mention that in the docs, then.

On Nov 30, 2011, at 7:14 PM, Jonathan [email protected] wrote:

Oh, gotcha. Yeah Reveal modals are designed to be placed at the end of the page, not within the layout - we use absolute instead of fixed so you can keep page scrolling (if you want it). Changing that to position:fixed would fit it, though.

---

Reply to this email directly or view it on GitHub:
https://github.com/zurb/foundation/issues/129#issuecomment-2968907

@smileyj68 any idea what the position: relative is doing on .column, .columns in grid.css? Position: fixed on the reveal-modal isn't a very option when working on a responsive site as you really need scrolling on that. I am going to try and overwrite that here locally and will test if it broke anything. But if you have any insight I'd love to hear it.

This issue just bit me in the rear too. Wish that was documented...

And me, good job for this comment. It does say in the docs to put it after everything but when using it with Wordpress that means in the footer. It would be handy if it said why to do that.

Me too. After setting it to position: fixed; and overflow: scroll; things worked out fine.

Any solution?! Set position fixed is not a good idea if your modal is big. If anyone find any solution, please write here. Thank you!

i still having this problem :(! Any solution? PLZ

Setting position to fixed is not working

I managed to get it working. switching from absolute positioning to fixed worked when I opened foundation.css and foundation.min.css and changed the positioning on the .reveal-modal class in both files as follows:

-absolute to fixed
-top:50px to 30% (you can change this, i needed to change it to get it to come down far enough to see)

This is definitely a problem if you are using Foundation for more than just static HTML. My Foundation Theme Framework for Shopify also has problems with modal popups for product images. Using .reveal-modal {position:fixed;overflow:scroll} certainly helps. But is is no real solution. 'Reveal' can be very ugly and impractical in this case. No amount of pure CSS is going to fix this, as far as I can see.

The problem you are experiencing is that the Reveal modal is affected by the positioning parent in previous releases, so you should really only ever have a Reveal modal as a direct child of the body element.

You should not be seeing this problem with version 4.3.2 as it ensures that the modal is moved to be a direct child of the body while the modal is visible which alleviates any weird positioning issues that your CSS is otherwise causing.

If you are seeing this in 4.3.2, please open a ticket with an example, as I made specific changes to ensure that this is working correctly.

I agree that this " Reveal modals are designed to be placed at the end of the page, not within the layout" should be placed in the documentation because newbies can get pissed off with this omission. I had to search the whole web before i saw the comment by @smileyj68 Thanks

@chimdi2000 As of 4.3.2, this is no longer an issue since the javascript will move it for you if you don't have it in the right place, so I think any further documentation is unnecessary.

Thanks for the heads up @seantimm. I guess I had better do some updating of the Shopify Foundation 4 theme framework!

@seantimm 4.3.2 has fixed my positioning issues but due to having form elements inside the reveal and being moved outside the form they can no longer be submitted.

As a custom fix I have added a setting for appendElement allowing them to be added to a specific location in the document. Any chance of adding this in a future release?

I realize this is an old thread, but as of December 2014, I'm still running into this issue. Granted it's a simple enough fix, but the point of using a framework like this is so we don't have to spend time on the basic things and can focus our time elsewhere.

Are there any plans to flesh this out in future releases? The ability to choose whether the modal is a fixed or absolute position seems like a great feature. Seems like it could be done with some sass variables.

@smileyj68, can you explain why it's desirable to have the page continue to be able to scroll while a reveal is open? Seems to me that when a modal is open, page content is intended to be blocked. Isn't it preferable to have it fixed and set an overflow property so the modal scrolls? If this was the default, it wouldn't be required to be placed at the end of the page, which is a difficulty for many CMS situations.

Also, I've had to change the reveal-bg position from absolute to fixed in all of my projects. I'm not understanding why that would ever be set as absolute.

I ran into a similar issue this morning (using foundation-rails 5.4.5) and resolved it by adding the following to .reveal-modal to fix it and center it on the page:

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}