Tried to make a window in object-oriented style (Windows will be several on several pages of the site, slightly different).

function Modal(modalBlock, buttonClick, buttonClose) { this.modalBlock = document.querySelector(modalBlock); this.buttonClick = document.querySelector(buttonClick); this.modalClose = document.querySelector(buttonClose); this.currentClass = this.modalBlock.getAttribute('class'); this.buttonClick.onclick = function() { if (this.modalBlock.classList.contains(this.currentClass + '--activ-js') == false) { this.modalBlock.classList.add(this.currentClass + '--activ-js') } } this.modalClose.onclick = function() { if (this.modalBlock.classList.contains(this.currentClass + '--activ-js') == true) { this.modalBlock.classList.remove(this.currentClass + '--activ-js'); } } } var videoModal = new Modal('.modal-wrapper', '.play-video', '.modal__close'); 
 .modal { width: 500px; height: 300px; background-color: red; display: none; } .modal--active-js { display: block; } 
 <button class="button">Открыть модальное окно</button> <div class="modal"> <span class="close">Закрыть</span> </div>

The point is that by clicking on the button that is specified when creating a new object, the script adds a class to the modal window that makes the modal window visible, but for some reason does not work.

  • one
    helped toster with a white background? - user33274
  • @ MaksimLensky, yes, there was a stupid mistake, sometimes it wedges - uzi_no_uzi

1 answer 1

 function Modal(modalBlock, buttonClick, buttonClose) { this.modalBlock = document.querySelector(modalBlock); this.buttonClick = document.querySelector(buttonClick); this.modalClose = document.querySelector(buttonClose); this.currentClass = this.modalBlock.getAttribute('class'); this.buttonClick.onclick = () => { if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == false) { this.modalBlock.classList.add(this.currentClass + '--active-js') } } // Когда вы вешаете обработчик в виде анонимной функции: // this.modalClose.onclick = function () { // У вас теряется контекст. // Используйте стрелочную функцию, чтоб this указывал на ваш объект this.modalClose.onclick = () => { if (this.modalBlock.classList.contains(this.currentClass + '--active-js')) { this.modalBlock.classList.remove(this.currentClass + '--active-js'); } } } var videoModal = new Modal('.modal', '.play-video', '.modal__close'); 
 .modal { width: 500px; height: 300px; background-color: red; display: none; } .modal--active-js { display: block; } 
 <button class="play-video">Открыть модальное окно</button> <div class="modal"> <span class="modal__close">Закрыть</span> </div>