- Теория
- Теория
Прячем всплывающее окно
Мы добавили обработчик и теперь попап открывается, если нажать на кнопку «Показать контакты». Сделаем так, чтобы попап закрывался по клику на крестик (кнопка с классом button-close).
Для этого сделаем уже знакомые нам действия: найдём кнопку, запишем в переменную, добавим ей обработчик клика. По клику будем удалять класс modal--show у попапа, чтобы он закрылся.
Как добавлять классы элементам мы знаем, а как их удалять?
Нужно использовать уже знакомый объект classList. Если для добавления класса мы используем метод add(), то для удаления надо обратиться к методу remove(), передав строку с классом, который нужно удалить. Выглядит это так:
var popup = document.querySelector('.popup');
// Перед названием селектора ставим точку
popup.classList.remove('popup--open');
// Перед названием класса точка не ставится
Результат в разметке такой же, как при удалении класса вручную.
<!-- Исходное состояние разметки -->
<section class="popup popup--open">
…
</section>
<!-- Состояние после вызова classList.remove -->
<section class="popup">
…
</section>
Найдём кнопку с помощью querySelector. Только искать будем не по всему документу, а внутри элемента popup. Мы точно знаем, что кнопка находится там, поэтому избыточно запускать поиск по всему документу. Это ресурсоёмкая операция, потому что документ может быть очень большим.
Добавим обработчик клика по кнопке с классом button-close, проверим, что всё настроено правильно и попап действительно закрывается. В этом обработчике мы не будем указывать параметр evt, так как мы не собираемся использовать объект события внутри функции-обработчика. Элемент button-close — кнопка. У неё нет действий по умолчанию, которые надо отменять.
обратите внимание, мы ставим точку, когда ищем элемент по селектору, но не ставим её при удалении или добавлении класса. Это правило важно запомнить. Чтобы было легче, можно помнить о том, что названия classList.remove и classList.add говорят сами за себя. Мы что-то делаем с классом элемента, поэтому нам надо передать только строку с названием класса. А искать элемент через querySelector можно разными способами. Мы говорили об этом раньше. Поэтому мы ставим точку перед названием класса, чтобы явно указать, что мы ищем именно по классу, а не тегу или как-то иначе.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
