Javascript, toggle between open and close button to push content div in and out

Question

Context:

• an open modal/overlay fullscreen
• with parent scrolling disabled
• and overlay scrolling y enabled
• content push when the open button is clicked

Which works great.

But I can't get the reverse effect when close button is clicked: It's closing without the effect.

If anyone can help me on this. I really appreciate it. Thank you so much.

 var body = document.body, overlay = document.querySelector('.modalbox'), overlayBtts = document.querySelectorAll('button[class$="modalbox"]'); [].forEach.call(overlayBtts, function(btt) { btt.addEventListener('click', function() { /* Detect the button class name */ var overlayOpen = this.className === 'open-modalbox', overlayClose = this.className === 'close-modalbox'; /* Toggle the aria-hidden state on the overlay and the no-scroll class on the body */ overlay.setAttribute('aria-hidden', !overlayOpen); overlay.classList.toggle('modalbox-active', overlayOpen); overlay.classList.toggle('modalbox-active-reverse', overlayClose); body.classList.toggle('noscroll', overlayOpen); /* On some mobile browser when the overlay was previously opened and scrolled, if you open it again it doesn't reset its scrollTop property */ overlay.scrollTop = 0; }, false); });

 .noscroll { overflow: hidden; } .modalbox { position: fixed; overflow-y: scroll; top: 0; left: 0; bottom: 0; right: 0; height: 100%; background-color: orange; z-index: 50; } .modalbox-active { animation: ease slideright .4s 1 forwards; } @keyframes slideright { 0% { width: 0; } 100% { width: 100%; } } .modalbox-active-reverse { width: 0; animation: ease slideleft .4s 1 reverse; } @keyframes slideleft { 0% { width: 100%; } 100% { width: 0; } } [aria-hidden="true"] { display: none; } [aria-hidden="false"] { display: block; }

 <div class="content"> <button type="button" class="open-modalbox" id="trigger">OPEN</button> </div> <section class="modalbox" aria-hidden="true"> <div> <h2>Hello, I'm the overlayer</h2> ... <button type="button" class="close-modalbox">CLOSE</button> </div> </section>

Answer 1

 $(document).ready(function () { $(".modalbox").hide(); $("#trigger").on("click", function(){ $(".modalbox").show(); }); }); var body = document.body, overlay = document.querySelector('.modalbox'), overlayBtts = document.querySelectorAll('button[class$="modalbox"]'); [].forEach.call(overlayBtts, function(btt) { btt.addEventListener('click', function() { /* Detect the button class name */ var overlayOpen = this.className === 'open-modalbox', overlayClose = this.className === 'close-modalbox'; /* Toggle the aria-hidden state on the overlay and the no-scroll class on the body */ overlay.setAttribute('aria-hidden', !overlayOpen); overlay.classList.toggle('modalbox-active', overlayOpen); overlay.classList.toggle('modalbox-active-reverse', overlayClose); body.classList.toggle('noscroll', overlayOpen); /* On some mobile browser when the overlay was previously opened and scrolled, if you open it again it doesn't reset its scrollTop property */ overlay.scrollTop = 0; }, false); });

 .noscroll { overflow: hidden; } .modalbox { position: fixed; overflow-y: scroll; top: 0; left: 0; bottom: 0; right: 0; height: 100%; background-color: orange; z-index: 50; } .modalbox-active { animation: ease slideright .4s 1 forwards; } @keyframes slideright { 0% { width: 0; } 100% { width: 100%; } } .modalbox-active-reverse { width: 0; animation: ease slideleft .4s 1; } @keyframes slideleft { 0% { width: 100%; } 100% { width: 0; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <button type="button" class="open-modalbox" id="trigger">OPEN</button> </div> <section class="modalbox" aria-hidden="true"> <div> <h2>Hello, I'm the overlayer</h2> ... <button type="button" class="close-modalbox">CLOSE</button> </div> </section>

Use JQUERY to hide the modal on load and when the user clicks the button open the window. also needed to remove the CSS code below.

 [aria-hidden="true"] { display: none; } [aria-hidden="false"] { display: block; }