I redo the modal window. There is one button with one class and 4 buttons with another class that open the same modal window and add themselves a new class. Opening a modal window and assigning a class is normal. But when I try to close the modal, the modal is closed, but the class is not deleted. There is a conflict between these lines.
if (target.className == 'popup-close') { target.classList.remove('more-splash');
How can I, when I click on the close button, find the button with the assigned class and delete it.

 let overlay = document.querySelector('.overlay'), close = document.querySelector('.popup-close'); document.addEventListener('click', function(event) { let target = event.target; if (target.className == 'description-btn' || target.className == 'more') { target.classList.add('more-splash'); overlay.style.display = "block"; document.body.style.overflow = 'hidden'; } if (target.className == 'popup-close') { target.classList.remove('more-splash'); overlay.style.display = "none"; document.body.style.overflow = ''; }

});

https://codepen.io/Pavlenkovik/pen/qyGopo

    1 answer 1

    Most likely, so:
    document.getElementsByClassName('more-splash')[0].classList.remove('more-splash') .
    You have this class is not hung up on the button, but on the div on which they clicked, therefore when you click on Close, it can not be removed, because it simply does not exist.

    The correct example is:

     let overlay = document.querySelector('.overlay'), description = document.querySelectorAll('.description-btn'), more = document.querySelector('.more'), close = document.querySelector('.popup-close'); document.addEventListener('click', function(event) { let target = event.target; if (target.className == 'description-btn' || target.className == 'more') { target.classList.add('more-splash'); overlay.style.display = "block"; document.body.style.overflow = 'hidden'; console.dir(target); console.log(target.className); console.log(target.classList); } if (target.className == 'popup-close') { document.getElementsByClassName('more-splash')[0].classList.remove('more-splash'); overlay.style.display = "none"; document.body.style.overflow = ''; } }); 
     .content .info-tabcontent .description-btn { width: 180px; height: 45px; line-height: 43px; margin-top: 30px; border: 1px solid #c78030; font-size: 14px; color: #c78030; text-transform: uppercase; font-weight: bold; text-align: center; font-weight: 300; cursor: pointer; } .overlay { position: fixed; display: none; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 3; } .overlay .popup { position: fixed; z-index: 4; left: 50%; top: 150px; width: 752px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .overlay .popup-close { position: absolute; right: -20px; top: -35px; cursor: pointer; font-size: 35px; color: #fff; font-weight: 300; } .overlay .popup-title { display: block; width: 100%; height: 71px; line-height: 71px; margin: 0; background-color: #c78030; color: #ffffff; text-transform: uppercase; font-size: 21px; font-weight: 500; text-align: center; } 
     <div class="content"> <div class="container" id="about"> <div class="info"> <div class="info-header"> <div class="info-header-tab"></div> <div class="info-header-tab"></div> <div class="info-header-tab"></div> <div class="info-header-tab"></div> </div> <div class="info-tabcontent fade"> <div class="description"> <div class="description-title"></div> <div class="description-text"> </div> <div class="description-btn"> Узнать подробнее </div> </div> <div class="photo"> </div> </div> <div class="info-tabcontent fade"> <div class="description"> <div class="description-title"></div> <div class="description-text"></div> <div class="description-btn"> Узнать подробнее </div> </div> <div class="photo"> </div> </div> <div class="info-tabcontent fade"> <div class="description"> <div class="description-title"></div> <div class="description-text"></div> <div class="description-btn"> Узнать подробнее </div> </div> <div class="photo"> </div> </div> <div class="info-tabcontent fade"> <div class="description"> <div class="description-title"></div> <div class="description-text"></div> <div class="description-btn"> Узнать подробнее </div> </div> <div class="photo"> </div> </div> </div> <button class="more"> Узнать больше</button> </div> </div> <div class="overlay fade"> <div class="popup"> <div class="popup-close">&times; </div> <div class="popup-title"> </div> </div> </div>

    • Thank you very much, I knew that something was simple, but I did not see the answer at all. - Viktor
    • replaced querySelector with getElementsByClassName - it works faster. - ya.ymer