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; }