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 3 months ago

Anyone please?

sherrycarrero@gmail.com 3 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 2 months ago

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

Hunor Madaras about 1 month 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 14 days 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');
    }
  });