Javascript，在打开和关闭按钮之间切换以推入和推出内容 div

Question

语境：

• 一个开放的模态/覆盖全屏
• 禁用父滚动
• 和覆盖滚动 y 启用
• 单击open按钮时推送内容

这很好用。

但是单击close按钮时我无法获得相反的效果：它正在关闭而没有效果。

如果有人可以帮助我。 对此，我真的非常感激。 非常感谢。

 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>

使用 JQUERY 在加载时隐藏模式，当用户单击按钮时打开窗口。 还需要删除下面的 CSS 代码。

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