Menu icon Foundation
Reveal modal opens beneath overlay?

When using Chrome on an iPad, I click a button to open a modal, but instead of the modal having a nice white background as expected, it all seems to be the same color as the background overlay, as though it is under the overlay; however, everything in the modal is still clickable, so it doesn't seem to be under the overlay.

What makes it every stranger is that the modals are working in Chrome on the iPad in most situations, and even on that page, there is a button at the top using the exact same code and the modal is white when opened, but when you scroll down to the bottom, the modal that opens is darkened.

I've trying forcing z-index values on the overlay and modal, forcing the background color to white in the modal, and nothing seems to work.

Steps to reproduce this anomaly:

1. Go to http://dominet.ca/eq/how-it-works.html using Chrome on an iPad.
2. Click on the "See the Doctor" button at the top, and the modal opens just fine with the white background.
3. Now scroll down to the bottom and click on the "See the Doctor" button and the modal opens dark.

Same modal, same code, but different behavior. What in the world is going on here?

The page at the link provided is using the Foundation 6 framework.

<!-- button that opens the reveal -->
<a data-toggle="MedeoConnect" class="button" ontouchend="this.onclick=fix">See the Doctor</a>



<!-- For connecting to Medeo -->
        <div class="large reveal" id="MedeoConnect" data-reveal data-close-on-click="false">              
            <div class="reveal-content">
                <h3>Connecting You to Medeo</h3>
                <p>EQ Virtual uses Medeo technology for bank grade encryption.</p>
                <p>Once you're signed in, you'll be connected with an EQ Virtual Care Manager.</p>
                
                <img src="img/medeo-connect.png" class="fw-image" />
                
                <div class="expanded buttons clearfix">
                    <a href="javascript: void();" class="button alt float-left" ontouchend="this.onclick=fix">Sign In</a>
                    <a href="javascript: void();" class="button float-right" ontouchend="this.onclick=fix">Sign Up</a>              
                </div>
                
                <button class="close-button" data-close aria-label="Close reveal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>            
        </div>
            

         

revealmodaloverlaydarkbugchromeipad

When using Chrome on an iPad, I click a button to open a modal, but instead of the modal having a nice white background as expected, it all seems to be the same color as the background overlay, as though it is under the overlay; however, everything in the modal is still clickable, so it doesn't seem to be under the overlay.

What makes it every stranger is that the modals are working in Chrome on the iPad in most situations, and even on that page, there is a button at the top using the exact same code and the modal is white when opened, but when you scroll down to the bottom, the modal that opens is darkened.

I've trying forcing z-index values on the overlay and modal, forcing the background color to white in the modal, and nothing seems to work.

Steps to reproduce this anomaly:

1. Go to http://dominet.ca/eq/how-it-works.html using Chrome on an iPad.
2. Click on the "See the Doctor" button at the top, and the modal opens just fine with the white background.
3. Now scroll down to the bottom and click on the "See the Doctor" button and the modal opens dark.

Same modal, same code, but different behavior. What in the world is going on here?

The page at the link provided is using the Foundation 6 framework.

<!-- button that opens the reveal -->
<a data-toggle="MedeoConnect" class="button" ontouchend="this.onclick=fix">See the Doctor</a>



<!-- For connecting to Medeo -->
        <div class="large reveal" id="MedeoConnect" data-reveal data-close-on-click="false">              
            <div class="reveal-content">
                <h3>Connecting You to Medeo</h3>
                <p>EQ Virtual uses Medeo technology for bank grade encryption.</p>
                <p>Once you're signed in, you'll be connected with an EQ Virtual Care Manager.</p>
                
                <img src="img/medeo-connect.png" class="fw-image" />
                
                <div class="expanded buttons clearfix">
                    <a href="javascript: void();" class="button alt float-left" ontouchend="this.onclick=fix">Sign In</a>
                    <a href="javascript: void();" class="button float-right" ontouchend="this.onclick=fix">Sign Up</a>              
                </div>
                
                <button class="close-button" data-close aria-label="Close reveal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>            
        </div>
            

         
John L almost 4 years ago

One other thing I just noticed is when I'm using the iPad mini, if I launch the modal in portrait mode the modal window is nice and white, but when I rotate it to landscape mode, it darkens. It goes back and forth from dark to light each time I rotate. What's up with that?

Brian Tan almost 4 years ago

You are using F6.0.5
F6.0 was having some reveal overlay issues. A work around would be option "overlay:false" . I believe F6.1 fixed the issues.

John L almost 4 years ago

Thanks for taking a look into my issue, Brian.

Actually, I have all the current Foundation files there now and the problem is still the same. I also don't think removing the overlay entirely is an acceptable solution since one of the main reasons to use these modals is for the darkened background effect. That is if adding overlay:false is actually going to remove the darkened background as I am assuming.

Anyway, if anyone is interested in seeing the bizarre behavior of Foundation modals, I invite you to go to http://dominet.ca/eq/how-it-works.html with an iPad and click the top "See The Doctor" button to see how the modal is white as expected, and then scroll down and click the green "See The Doctor" button and watch how the darkened background now goes ON TOP of the modal.

But wait! Now try going to the index page at http://dominet.ca/eq/index.html, and the same thing happens, but I noticed something else. The modal switches from working properly to not working properly just with a bit of scrolling. While you are still in the area below the hero image with the green "See The Doctor" button, scroll up a bit more so that the hero image is a bit visible, and the modal opens as white again. Is it messing up because of the background colors that happen to be there or because of the distance from the top of the screen? I don't know, but it might be something worth looking into.

John L almost 4 years ago

Oh, I forgot to mention that you need to be using Chrome as your browser to see this bug in action.

Joel Carlos over 3 years ago

I fixed the issue by moving the modal template close to the <body> as possible