Menu icon Foundation
Reveal modal background color isn't white

My modal background color is not white. It is the same color as the overlay. Not sure what I'm doing wrong.

Revealbgcolor

revealmodal

My modal background color is not white. It is the same color as the overlay. Not sure what I'm doing wrong.

Revealbgcolor

This post has been closed. No new replies can be added.

John Gerome over 5 years ago

try to check your javascript console on your browser if has an error/warnings.

Tim Stewart over 5 years ago

There are no errors or warnings. Using latest version of Chrome & latest version of Foundation.

Tim Stewart over 5 years ago

Found the solution. In the Foundation.css file, the z-index for .reveal-modal-bg was set to 99. Setting it to 98 solved the problem.

Rafi Benkual over 5 years ago

This has been fixed on the Master branch. You can update to there, change it int the foundation.css file, or 5.2.1 will have the update later this week.

https://github.com/zurb/foundation/commit/22e42b1ca9e37f7b88fa2e887435d696ef6361a7

Rob Jones over 5 years ago

if someone is using SCSS, until the update you can change the z-index value to 98 in /foundation/components/_reveal.scss line 51.

@mixin reveal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: $reveal-overlay-bg-old;
  background: $reveal-overlay-bg;
  z-index: 98;
  display: none;
  top: 0;
  #{$default-float}: 0;
}