«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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



Далее на странице...

  • Исходные данные - Модальное окно скрыто
  • По умолчанию модальное окно скрыто - Как его увидеть?
  • Используем data-атрибуты
  • Триггерам назначаются data-атрибуты - Для вызова/закрытия окна Для вызова/скрытия модального окна используются инлайн-стили Для body - overflow = 'hidden' - содержимое страницы не прокручивается Для вызова/скрытия окна - свойство classList: методы add и remove Для вызова/скрытия окна - свойство classList: метод toggle
  • Закрытие модального - Клик на область вне окна
  • Используется event.target для отслеживания, куда кликнул пользователь
  • Закрытие модального - Клик на ESC
  • События keydown и keyup – нажатие и отпускание клавиши Как отслеживать нажатия клавиш? У каждой клавиши есть свой код. event.code - Используется объект события и его свойство code. Обработчик события назначается для объекта document.

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

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

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

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



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

Фрагмент 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).

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

Ваше Имя:

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

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

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


Рунет - Часть 5
Вызов и закрытие модального окна - Триггеры и data-атрибуты
4814
Методы объекта ClassList - Работа с классами - Свойство length
955
Делегирование событий - Отслеживание событий на множестве элементов
3101
Пример создания табов в JavaScript - Работа с проектом
1074
Методы setTimeout, setInterval и clearInterval – Синтаксис
780
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
648
Таймер обратного отсчета – Остаток времени до полуночи
1413
Cвойства clientWidth и clientHeight - Размеры элементов DOM
639
Открытие модального окна через промежуток времени и в конце страницы
611
Функции-конструкторы - Прототип объекта. Свойство prototype
280
Контекст вызова функции this - Методы call, apply и bind
344
Контекст вызова в обработчиках событий – this в стрелочной функции
346
Объявление и наследование классов - Свойство constructor
207
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки