Menu icon Foundation
Reveal doesn't remove is-reveal-open body class on close

Hi,

I have a full-screen reveal for age verification but it doesn't remove the class is-reveal-open from the body after closing.

As a temporary fix I'm removing the class with the close event triggered by the reveal, but would like to understand why this is happening.

<div class="full reveal" id="ageVerification" data-reveal data-close-on-click="false" data-close-on-esc="false" data-animation-out="fade-out">
	<div id="legalAge-text">
		<h1 class="subheader"><?php pll_e('legal_age'); ?></h1>
	</div>
	<div id="legalAge-buttons">
		<h1 class="subheader"><a class="large button verification" data-close><?php pll_e('yes'); ?></a> / <a href="#" class="large button"><?php pll_e('no'); ?></a></h1>
	</div>
</div>

Thanks!

revealmodalcloseclassBody

Hi,

I have a full-screen reveal for age verification but it doesn't remove the class is-reveal-open from the body after closing.

As a temporary fix I'm removing the class with the close event triggered by the reveal, but would like to understand why this is happening.

<div class="full reveal" id="ageVerification" data-reveal data-close-on-click="false" data-close-on-esc="false" data-animation-out="fade-out">
	<div id="legalAge-text">
		<h1 class="subheader"><?php pll_e('legal_age'); ?></h1>
	</div>
	<div id="legalAge-buttons">
		<h1 class="subheader"><a class="large button verification" data-close><?php pll_e('yes'); ?></a> / <a href="#" class="large button"><?php pll_e('no'); ?></a></h1>
	</div>
</div>

Thanks!

Diogo Bento 5 months ago

Anyone please?

sherrycarrero@gmail.com 4 months ago

I am having the same issue with full reveals. Neither 'escape' nor clicking the close button removes the .is-reveal-open class on the body, thus preventing users from scrolling once they close the modal.

Diogo Bento 4 months ago

Seems like a bug. Should anyone be able to go through the code and suggest a fix?

Hunor Madaras 3 months ago

You need to find the finishUp() function from the "foundation.reveal.js" and change these lines 

 

FROM:

if ($('.reveal:visible').length === 0) {// code}

 

TO:

if ($('.reveal:visible').length != 0) {// code}

 

I hope that will help! :)

Form me is worked.

Mike Murray 2 months ago

If you're not able to modify the JavaScript, you can add this somewhere to your page.  Hooks into the closed event to remove the class from the body.

  $(document).on('closed.zf.reveal', function() {
    if ($('body').hasClass('is-reveal-open')) {
      $('body').removeClass('is-reveal-open');
    }
  });

 

Ed Hatrick-Smith 20 days ago

I'm also having this issue, though Mike, your script doesn't seem to work for me. It seems like the finishUp function isn't being called at all?

 

I also don't want to edit foundation.reveal.js as I import this via NPM.

 

Anyone else have an solutions?