Menu icon Foundation
Reveal Modal Overlay doesn't appear until after modal is closed

I have a simple reveal modal that is automatically open when the page is loaded. However, the overlay doesn't appear until I close the reveal modal, and then there's no way to make it go away. How can I make the overlay open and close at the same time as my reveal modal? I've pasted my code below.

<div id="MyModal" class="reveal-modal medium open" data-reveal data-overlay="false" style="visibility: visible; display: block; opacity: 1; z-index: 7002;">
  <h2 id="modalTitle">Title</h2>
  <p class="lead">text</p>
  <p>text</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
            

         

revealmodaloverlay

I have a simple reveal modal that is automatically open when the page is loaded. However, the overlay doesn't appear until I close the reveal modal, and then there's no way to make it go away. How can I make the overlay open and close at the same time as my reveal modal? I've pasted my code below.

<div id="MyModal" class="reveal-modal medium open" data-reveal data-overlay="false" style="visibility: visible; display: block; opacity: 1; z-index: 7002;">
  <h2 id="modalTitle">Title</h2>
  <p class="lead">text</p>
  <p>text</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
            

         
Rafi Benkual over 3 years ago

I've seen it done in the JS this way: http://codepen.io/abdullahsalem/pen/VeePbv

How are initializing the modal when the page loads?
data-overlay="false" should not allow an overlay at all - how are you using that?

Lindsey Jones over 3 years ago

For some reason, the close button on the modal doesn't work unless I include data-overlay="false" for some reason.
For the JS solution, can I just put that at the bottom of my code in tags, or do I have to add that into foundation.min.js somewhere?
Thanks for you help!

Lindsey Jones over 3 years ago

Also, I should clarify that I'm using Foundation 5.5.