Практика JavaScript - Продвинутое модальное окно
Как добавить интерактивность на сайт с JavaScript: создаем модальное окно за 30 минут
В первой части мы создали сайт с HTML и CSS, а в второй части улучшили его с помощью Bootstrap. Теперь пора сделать сайт интерактивным! Сегодня мы добавим модальное окно (всплывающее окно) с помощью JavaScript. Это займет всего 30 минут, а ваш сайт станет современнее и интереснее для пользователей. Поехали кодить! Модальное окно — это всплывающий блок, который появляется поверх контента и привлекает внимание. Например, это может быть форма подписки, уведомление или акция. Такие окна часто встречаются на сайтах: они помогают собирать email, показывать важные сообщения или предлагать скидки...
Вёрстка модальных окон
Практически каждый сайт использует модальные окна для различных целей: отображение уведомлений, подтверждение действий, сбор информации и прочее. В этой главе мы рассмотрим два способа отображения модальных окон: новый и универсальный. Новые модальные окна Новые модальные окна имеют очень простой синтаксис HTML: <dialog open>Это модальное окно</dialog> Для отображения модального окна, необходимо добавить атрибут open К сожалению, обойтись совсем без JavaScript здесь невозможно, поэтому далее я приведу пример кода, который минимизирует ваше взаимодействие с JavaScript...