«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Пропишем функционал модального окна и пропишем его вызов сразу на несколько триггеров.

Триггеры - это элементы, которые вызывают последующие действия.

Продолжим работать с проектом, где создавались табы и таймер обратного отсчета.

Триггерами модального окна являются две кнопки "Связаться с нами".



Исходные данные - Модальное окно скрыто

Фрагмент HTML-кода для модального окна + триггеры

Скачать Архив с исходными данными

<header class="header">
    .
    .
    <div class="header__right-block">
        <button class="btn btn_white">Связаться с нами</button>
    </div>
</header>
    
    
	<div class="offer__action">
        <button class="btn btn_dark">Связаться с нами</button>
    </div>
    
    
<div class="modal">
    <div class="modal__dialog">
        <div class="modal__content">
            <form action="#">
                <div class="modal__close">&times;</div>
                <div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
                <input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
                <input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
                <button class="btn btn_dark btn_min">Перезвонить мне</button>
            </form>
        </div>
    </div>
</div>
<script src="js/script.js"></script>

Исходная страница в Браузере

По умолчанию модальное окно скрыто. Чтобы его увидеть, нужно в Инструментах разработчика - во вкладке Elements выделить <div class="modal">. А во вкладке Styles - снять галочку со свойства display: none. См. иллюстрацию ниже.

Используем data-атрибуты

Триггеры (в данном случае две кнопки "Связаться с нами") часто имеют разные классы/идентификаторы/теги, поэтому чтобы группа триггеров вызывало одно и то же действие, им назначают data-атрибуты.

Например, data-атрибут data-modal, установленный для группы кнопок, будут говорить о том, что эти элементы отвечают за вызов модального окна.

То же самое касается элемента/ов, закрывающего модальное окно - ему/им также можно назначить data-атрибут, например data-close.

HTML-код - data-атрибуты

<header class="header">
    .
    .
    <div class="header__right-block">
        <button data-modal class="btn btn_white">Связаться с нами</button>
    </div>
</header>
    
    
	<div class="offer__action">
        <button data-modal class="btn btn_dark">Связаться с нами</button>
    </div>
    
    
<div class="modal">
    <div class="modal__dialog">
        <div class="modal__content">
            <form action="#">
                <div data-close class="modal__close">&times;</div>
                <div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
                <input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
                <input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
                <button class="btn btn_dark btn_min">Перезвонить мне</button>
            </form>
        </div>
    </div>
</div>
<script src="js/script.js"></script>

Прописаны data-атрибуты data-modal строки №5 и №11 - для возможности вызова модального окна и data-close строка №19 - для закрытия модального окна.

Пример 1.1 - Используем инлайн-стили

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
      modalCloseBtn = document.querySelector('[data-close]'),
      modalWindow = document.querySelector('.modal');

// Открываем модальное окно   
modalTrigger.forEach(item => {
  item.addEventListener('click', () => {
        modalWindow.style.display = 'block';
        document.body.style.overflow = 'hidden';
     });
});

// Закрываем модальное окно   
modalCloseBtn.addEventListener('click', () => {
  modalWindow.style.display = 'none';
  document.body.style.overflow = '';
});

Результат в Браузере

Здесь для вызова и скрытия модального окна используются инлайн-стили.

При этом для тега body устанавливается стиль overflow = 'hidden', чтобы при вызове модального окна содержимое страницы не прокручивалось.

При закрытии модального окна overflow = '' (устанавливается значение по умолчанию).

Пример 1.2 - Свойство classList

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
      modalCloseBtn = document.querySelector('[data-close]'),
      modalWindow = document.querySelector('.modal');
   
modalTrigger.forEach(item => {
  item.addEventListener('click', () => {
        modalWindow.classList.add('show');
        modalWindow.classList.remove('hide');
        document.body.style.overflow = 'hidden';
     });
});

modalCloseBtn.addEventListener('click', () => {
  modalWindow.classList.add('hide');
  modalWindow.classList.remove('show');
  document.body.style.overflow = '';
});

Результат в Браузере

Здесь для вызова и скрытия модального окна используется свойство classList и его методы add и remove.

Пример 1.3 - Свойство classList - toggle

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
      modalCloseBtn = document.querySelector('[data-close]'),
      modalWindow = document.querySelector('.modal');
   
modalTrigger.forEach(item => {
  item.addEventListener('click', () => {
        modalWindow.classList.toggle('show');
        document.body.style.overflow = 'hidden';
     });
});

modalCloseBtn.addEventListener('click', () => {
  modalWindow.classList.toggle('show');
  document.body.style.overflow = '';
});

Результат в Браузере

Здесь для вызова и скрытия модального окна используется свойство classList и его метод toggle.

Закрытие модального - Клик на область вне окна

Закрытие модального окна при клике на подложке/область вне окна.

Как это сделать?

Рассмотрим структуру модального окна.

modal - это подложка модального окна (width: 100% и height: 100%). В примере ниже для наглядности обозначены границы желтого цвета.

modal__dialog - это обертка контента модального окна. Для наглядности обозначены границы красного цвета.

Используя event.target, нужно отследить, куда кликнул пользователь: если клик происходит за пределами модального окна, то есть, в нашем случае, на его подложке modal, то окно будет закрыто.

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
      modalCloseBtn = document.querySelector('[data-close]'),
      modalWindow = document.querySelector('.modal');

modalTrigger.forEach(item => {
  item.addEventListener('click', () => {
        modalWindow.classList.add('show');
        modalWindow.classList.remove('hide');
        document.body.style.overflow = 'hidden';
     });
});

modalCloseBtn.addEventListener('click', () => {
  modalWindow.classList.add('hide');
  modalWindow.classList.remove('show');
  document.body.style.overflow = '';
});

// При клике ВНЕ окна - закрываем его
modalWindow.addEventListener('click', (e) => {
  if (e.target === modalWindow) {
     modalWindow.classList.add('hide');
     modalWindow.classList.remove('show');
     document.body.style.overflow = '';
  }
});

Результат в Браузере

Назначаем для модального окна обработчик события.

Если место клика пользователя - это подложка модального окна: if (e.target === modalWindow), то модальное окно закрывается.

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

Оптимизация кода

Повторяющийся код заносится в функцию closeModal().

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
	  modalCloseBtn = document.querySelector('[data-close]'),
	  modalWindow = document.querySelector('.modal');

modalTrigger.forEach(item => {
  item.addEventListener('click', () => {
		modalWindow.classList.add('show');
		modalWindow.classList.remove('hide');
		document.body.style.overflow = 'hidden';
	 });
});

function closeModal(){
  modalWindow.classList.add('hide');
  modalWindow.classList.remove('show');
  document.body.style.overflow = '';
};

modalCloseBtn.addEventListener('click', closeModal); // Функция передается

// При клике ВНЕ окна - закрываем его
modalWindow.addEventListener('click', (e) => {
  if (e.target === modalWindow) {
	 closeModal(); // Функция вызывается
  }
});

Результат в Браузере

В первом случае функция closeModal() передается, во втором вызывается.

Закрытие модального - Клик на ESC

Закрытие модального окна при клике на клавишу ESC.

Событие keydown происходит при нажатии клавиши, а keyup – при отпускании.

Как отслеживать нажатия клавиш?

Здесь снова используется объект события и его свойство code.

Свойство code объекта события позволяет получить физический код клавиши.

У каждой клавиши есть свой код.

Таким образом, есть возможность отслеживать код нажатой клавиши.

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
	  modalCloseBtn = document.querySelector('[data-close]'),
	  modalWindow = document.querySelector('.modal');

modalTrigger.forEach(item => {
  item.addEventListener('click', () => {
		modalWindow.classList.add('show');
		modalWindow.classList.remove('hide');
		document.body.style.overflow = 'hidden';
	 });
});

function closeModal(){
  modalWindow.classList.add('hide');
  modalWindow.classList.remove('show');
  document.body.style.overflow = '';
};

modalCloseBtn.addEventListener('click', closeModal); // Функция передается

// При клике ВНЕ окна - закрываем его
modalWindow.addEventListener('click', (e) => {
  if (e.target === modalWindow) {
	 closeModal(); // Функция вызывается
  }
  
// Закрытие модального - Клик на ESC
document.addEventListener('keydown', (e) => {
   if (e.code === "Escape" && modalWindow.classList.contains('show')) {
	   closeModal(); 
   }
});

Результат в Браузере

Закрытие модального окна при клике на клавишу ESC.

Обработчик события назначается для объекта document.

Если пользователь нажимает на клавишу ESC, то происходит закрытие модального окна. При условии, что модальное окно открыто: modalWindow.classList.contains('show') (делается это для того, чтобы функция closeModal() не срабатывала при каждом нажатии на клавишу ESC).



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432
Популярные заметки
Последние заметки