0

Пытался сделать окно в объектно ориентированном стиле(Окон будет несколько на нескольких страницах сайта, немного разные).

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>

Суть в том, что по клику на кнопку которая указывается при создании нового объекта, скрипт добавляет модальному окну класс который делает модальное окно видимым, но по какой-то причине не работает.

2
  • 1
    помогли на toster с белым фоном ?
    – user33274
    25 мая 2018 в 10:44
  • @МаксимЛенский, да, там глупая ошибка была, иногда клинит
    – uzi_no_uzi
    25 мая 2018 в 10:46

1 ответ 1

2

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.