//Modal windows 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 = () => { if (this.modalBlock.classList.contains(this.currentClass + '--active-js') == true) { this.modalBlock.classList.remove(this.currentClass + '--active-js'); } } this.modalBlock.onclick = (event) => { console.log(event); var contentCurrentClass = this.currentClass; if (event.target.classList.contains(contentCurrentClass + '--active-js') == true) { this.modalBlock.classList.remove(contentCurrentClass + '--active-js'); } } } var videoModal = new Modal('.modal-wrapper', '.play-video', '.modal__close'); var appModal = new Modal('.modal-wrapper', '.button', '.modal__close'); 
 .button { display: inline-block; padding: 1.125rem 0; min-width: 15.625rem; background-color: #9e784c; color: #ffffff; -webkit-box-shadow: 0 0 0.875rem #9e784c; box-shadow: 0 0 0.875rem #9e784c; text-decoration: none; border-radius: 50px; font-size: 1rem; text-align: center; font-weight: 300; -webkit-transition: .3s; transition: .3s; text-transform: uppercase; } .button:hover { -webkit-box-shadow: 0 0 1.75rem #9e784c; box-shadow: 0 0 1.75rem #9e784c; } .modal-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); -webkit-transition: .5s; transition: .5s; display: none; opacity: 0; } .modal-wrapper--active-js { display: block; -webkit-animation: modalShow 1s 1; animation: modalShow 1s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .modal { width: 70%; height: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #ffffff; border-radius: 5px; padding: 1.25rem; } .modal__video { width: 100%; height: 90%; } .modal__name { position: relative; height: 10%; } .modal__title { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.125rem; text-align: center; font-weight: 100; display: block; color: #828282; text-transform: uppercase; } .modal__title--contacts-flat { font-size: 2.25rem; } .modal__close { position: absolute; right: 0; top: -26px; font-size: 0.875rem; color: #ffffff; text-transform: uppercase; font-weight: 300; cursor: pointer; display: inline-block; } .modal__close--application { top: 10px; right: 10px; color: #4f4f4f; } .modal--form { padding: 0; } .modal__background { width: 49%; height: 100%; display: inline-block; background: url(../img/form_background.jpg); background-size: cover; background-repeat: no-repeat; position: relative; } .modal__form-place { width: 50%; display: inline-block; vertical-align: top; padding: 1.25rem; text-align: center; } .modal__headline { margin-top: 5rem; font-size: 2.25rem; color: #333333; text-transform: uppercase; font-weight: 100; padding-bottom: 1rem; border-bottom: 1px solid #828282; width: 74%; display: inline-block; margin-bottom: 1rem; } .modal__sub-title { color: #4f4f4f; font-weight: 300; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 4.5rem; display: inline-block; width: 44%; } .modal__input { display: block; margin: 0 auto 2.5rem auto; padding: 8px 26px; width: 50%; position: relative; border: none; border-bottom: 1px solid #9e784c; } .modal__input--user { background-image: url(../img/1.png); background-position: 6px; background-repeat: no-repeat; } .modal__input--phone { background-image: url(../img/2.png); background-position: 6px; background-repeat: no-repeat; } 
 <a href="#" class="button button-openform--js">Заказать звонок</a> <div class="modal-wrapper"> <div class="modal modal--form"> <div class="modal__background"> <h4 class="modal__title modal__title--contacts-flat"> жк «Достояние» </h4> </div> <div class="modal__form-place"> <h5 class="modal__headline"> Обратный звонок </h5> <span class="modal__sub-title"> оставьте заявку и мы вам перезвоним </span> <div class="modal__form"> <input type="text" placeholder="ВВЕДИТЕ ИМЯ" class="modal__input modal__input--user"> <input type="text" placeholder="+7 (___) ___-__-__" class="modal__input modal__input--phone"> </div> <a href="#" class="button" id='send-form'>Заказать звонок</a> </div> <span class="modal__close modal__close--application"> закрыть </span> </div> </div>
PS If the last two lines are interchanged, then everything works as it should.

For what reason could it be?

Although the code to this line (and including this line) works fine.

  • "Works fine" - how did you find out? - Igor
  • And even in the js-console there are no errors? - andreymal
  • @Igor, checked in the layout, the code should hide and show a modal window, it copes with it, on another page you need to call a modal window on another button, but this does not happen (The second object is responsible for this), an error pops up that modalBlock is null , but it is not, because the element is 100% on the page, and the most interesting is that if you put an alert in front of this line, then it works as it should. And if after this line, it does not work, if the lines are reversed, then the call will work on the second page, but not on the first page - uzi_no_uzi
  • make a minimal reproducible example that reproduces the error. Add a markup to the snippet - Grundy
  • @andreymal, described the problem above in more detail - uzi_no_uzi

1 answer 1

So Modal should be written so that it does nothing if something is missing on the page.

 function Modal(modalBlock, buttonClick, buttonClose) { this.modalBlock = document.querySelector(modalBlock); this.buttonClick = document.querySelector(buttonClick); this.modalClose = document.querySelector(buttonClose); this.ready = this.modalBlock && this.buttonClick && this.modalClose; if (!this.ready) return; ...