Jquery Modal 在点击后只打开一次，如何解决这个问题？

Question

我希望为我的每个部分触发不同的按钮/模式。 我想点击点击，出现一个包含所有文章详细信息的模式弹出窗口。

到目前为止一切正常，但我的问题是我的模式只打开一次点击。 我想知道我必须在我的 Javascript 代码中修改什么才能使我的模态工作始终在单击时系统地打开。

有任何想法吗？ 这是我的小提琴： https : //jsfiddle.net/CAT999/48rd76mp/5/

片段代码在这里：

const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {

  btn.onclick = function() {
     overlay = this.nextElementSibling
       overlay.classList.add('overlay--open');
  }
})


function closeModal() {
    overlay.classList.remove('overlay--open');
}

function onDocumentKeyUp(e) {
    if (e.keyCode === 27) {
        closeModal();
    }
}

function onDocumentClick(e) {
    if (e.target === overlay) {
        closeModal();

    }
}

document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);

Answer 1

在所有关闭按钮中用closeModal()替换"onclick="document.getElementById('YourModalBox').style.display='none'""

 const modalBtns = document.querySelectorAll('.modal-btn'); let overlay; modalBtns.forEach(btn => { btn.onclick = function() { overlay = this.nextElementSibling overlay.classList.add('overlay--open'); document.body.classList.add('hidden'); } }) function closeModal() { overlay.classList.remove('overlay--open'); document.body.classList.remove('hidden'); } function onDocumentKeyUp(e) { if (e.keyCode === 27) { closeModal(); } } function onDocumentClick(e) { if (e.target === overlay) { closeModal(); } } document.addEventListener('click', onDocumentClick, false); document.addEventListener('keyup', onDocumentKeyUp, false);

 body.hidden{ overflow: hidden; } .close-button { border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; overflow: hidden; text-decoration: none; color: inherit; background-color: red; text-align: center; cursor: pointer; white-space: nowrap } .topright { position: fixed!important; right: 20px; top: 20px; } *{ z-index: 999999; margin:0; padding:0; } body, html{ font-size: 16px; } /*container-video*/ /*container-video*/ /*container-video*/ /*container-video*/ /*container-video*/ /*container-video*/ .img-container { display: flex; height: 100vh; justify-content: center; align-items: center; padding:20px; background-color: white; justify-content: center; z-index:0; } @media only screen and (max-width:800px){ .img-container { padding:20px; height: 80vh; } } @media only screen and (max-width:450px){ .img-container { padding:20px; height: 82vh; } } #uno{background:purple;} #due{background: yellow;} #tre{background:black;} img { position:absolute; border-radius: 20px; height:100%; z-index:0; } @media only screen and (max-width:800px){ img { width:95%; height:80%; object-fit: cover; } } @media only screen and (max-width:450px){ img { width:95%; height:100%; object-fit: cover; } } .sticky { position: -webkit-sticky; position: sticky; bottom: 20px; right:20px; justify-content: space-between; align-self: flex-end; margin-left: auto; } .sticky-button { background: none; -webkit-font-smoothing: antialiased; -webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4); box-shadow:0 0px 7px rgba(0,0,0,0.4); /*padding: 6px 10px;*/ color:white; font-family:helvetica; font-weight:600; font-size: 1rem; border-radius: 24px; width: auto; } @media only screen and (max-width:800px){ .sticky-button { width: auto; font-size: 0.8rem; } } @media only screen and (max-width:450px){ .sticky-button { width: auto; font-size: 0.8rem; } } .sticky-button-description { color: hsla(0,0%,100%,.75); font-size: 12px; line-height: 1.4em; letter-spacing: normal; font-size: 12px; line-height: 1.4em; font-weight:400; font-family:helvetica; display:inline; letter-spacing: normal; } @media only screen and (max-width:450px){ .sticky-button-description{ } } .sticky-button-break { padding:0.3rem; } /*container-video*/ /*container-video*/ /*container-video*/ /*container-video*/ /*container-video*/ /*container-video*/ .break{height:200px; width:100%; background:black; margin:0; padding:0;} .break-2{height:900px; width:100%; background:red; margin:0; padding:0;} .btn-1 { border: none; border-radius: 24px; color: white; background-color:#3E3E3E; padding: 10px 18px; font-size: 16px; width: 100%; cursor: pointer; outline: none; overflow: hidden; box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6); transition: transform .3s ease; z-index:100; } .btn-1:active { transform: scale(10.9); opacity:0; z-index:20; transition: transform .3s ease; z-index:100; } .btn-2 { border: none; border-radius: 24px; color: white; background-color:#3E3E3E; padding: 10px 18px; font-size: 16px; width: 100%; cursor: pointer; outline: none; overflow: hidden; box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6); transition: transform .3s ease; z-index:50; } .btn-2:active { position:sticky; transform: scale(10.9); z-index:50; } .btn-3 { border: none; border-radius: 24px; color: white; background-color:#3E3E3E; padding: 10px 18px; font-size: 16px; width: 100%; cursor: pointer; outline: none; overflow: hidden; box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6); transition: transform .3s ease; z-index:30; } .btn-3:active { transform: scale(10.9); z-index:30; } /* Modal */ .overlay { position: fixed; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; background: black;/*rgba(0, 0, 0, .55);*/ pointer-events: none; } .overlay, .modal { opacity: 0; transition: .5s; } .overlay--open { opacity: 1; pointer-events: auto; } .overlay--open .modal { opacity: 1; transform: none; } .modal { position: fixed; width: 100%; margin: 15vh auto 0; background: black; color:#fff; transform: translateY(80%) scale(.8); transition-timing-function: cubic-bezier(.3, 0, 0, 1.3); transition-delay: .4s; text-align: center; font-size: 26px; font-weight:400; } /*MODAL TRIGGER*/ /*MODAL TRIGGER*/

 <!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1--> <!--SECTION-1--> <!-- img-container --> <!-- img-container --> <!-- img-container --> <!-- img-container --> <div class="img-container" id="uno"> <img src="https://assets.vogue.com/photos/5cd30b6bd2f46d2eca29ab09/master/w_2560%2Cc_limit/virgil-abloh-vogue-june-2019-issue.jpg" alt="Smiley face"> <div class="sticky"> <div class="sticky-button"> <!--MODAL-1--> <button class='btn-1 modal-btn'>Open Modal</button><div class="overlay" id="YourModalBox"> <span onclick="closeModal()" class="close-button topright">&times;</span><div class="modal"><span> Title Description-1 👋 🌎<br> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div> <!--MODAL-1--> </div></div></div> <!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1--> <!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2--> <!--SECTION-2--> <!-- img-container --> <!-- img-container --> <!-- img-container --> <!-- img-container --> <div class="img-container" id="due"> <img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face"> <div class="sticky"> <div class="sticky-button"> <!--MODAL-2--> <button class='btn-2 modal-btn'>Karl info</button><div class="overlay" id="YourModalBox2"> <span onclick="closeModal()" class="close-button topright">&times;</span><div class="modal"><span> Title Description-1 👋 🌎<br> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div> <!--MODAL-2--> </div></div></div> <!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2--> <!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--> <!-- img-container --> <!-- img-container --> <!-- img-container --> <!-- img-container --> <div class="img-container" id="tre"> <img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg" alt="Smiley face"> <div class="sticky"><div class="sticky-button"> <!--MODAL-3--> <button class='btn-3 modal-btn'>Tomoaki Nagao info</button> <div class="overlay" id="YourModalBox3"> <span onclick="closeModal()" class="close-button topright">&times;</span> <div class="modal"><span>Title Description-3 👋 🌎<br>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div> <!--MODAL-3--> </div></div></div> <!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--> <!-- REMOVE!! --> <div class="break-2"></div> <!-- REMOVE!! -->