Как создать адаптивное всплывающее модальное окно используя HTML, CSS и Javascript

Всем Привет! Сегодня вы узнаете как создать адаптивное всплывающее модальное окно используя HTML, CSS и JavaScript. Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом. 

Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В диком мире веб-материалов и приложений вы, наверное, сталкивались с этими маленькими всплывающими окнами, верно? Они похожи на мини-окна, которые появляются на вашем экране. 

Эти всплывающие окна выполняют массу разных задач: от сообщения вам информации и запроса вашей информации до повышения интереса к веб-сайту. В этом блоге мы разберемся, что такое модальное всплывающее окно, как оно работает и почему это важно.

Модальное всплывающее окно похоже на окно, которое внезапно появляется на веб-странице. Слово «модальный» означает, что оно переводит вас в специальный режим, в котором вам нужно разобраться со всплывающим окном, прежде чем вы сможете вернуться к тому, что делали.

Рассказываем вам вещи: иногда они всплывают, чтобы предоставить вам информацию, например уведомления или сообщения.

Получение вашей информации: вы можете увидеть всплывающее окно, в котором вас просят ввести что-нибудь, подписаться на что-нибудь или купить что-нибудь.

Убедитесь, что вы уверены: вы знаете, когда сайт спрашивает: «Вы действительно уверены, что хотите удалить это?» Это модальное всплывающее окно.

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

Модальные всплывающие окна работают довольно просто. Когда что-то их запускает, они появляются сверху или в центре основного материала на веб-странице. Это похоже на то, как будто они приглушают свет на заднем плане, чтобы всплывающее окно сияло.

Пользователь запускает это: обычно именно вы создаете модальное всплывающее окно. Вы нажимаете на что-то, и бац, появляется всплывающее окно.

Затемненный фон: основной объект на заднем плане становится немного темнее или размытым, чтобы всплывающее окно выделялось.

Всплывающее окно появляется: всплывающее окно появляется прямо посередине экрана. Все дело в сообщении, которое он хочет передать, или в том, чего он хочет от вас.

Специальный режим: Модальные всплывающие окна называются «модальными», потому что они заставляют вас что-то делать, прежде чем вы сможете вернуться к тому, что вы делали. Сначала вам нужно разобраться со всплывающим окном.

Пользователь делает что-то: во всплывающем окне вы можете делать что-то, например вводить информацию, читать сообщение или говорить «да» или «нет». Иногда есть кнопка, позволяющая закрыть его, если вы передумаете.

Выход: Если вы хотите избавиться от всплывающего окна, обычно вы можете щелкнуть за его пределами или нажать клавишу «Escape». Некоторые всплывающие окна также имеют кнопку для их закрытия.  

Модальные всплывающие окна оказывают большое влияние на то, как вы работаете в Интернете, и хорошие они или плохие, зависит от того, как они используются. 

Они привлекают ваше внимание. Модальные всплывающие окна созданы для того, чтобы привлечь ваше внимание. Если их правильно использовать, они могут рассказать вам важную информацию или заставить вас сделать что-то важное.

Вы фокусируетесь на всплывающем окне: они заставляют вас сначала посмотреть на всплывающее окно, прежде чем вы сможете вернуться к тому, что вы делали. Это здорово для вещей, которые требуют вашего полного внимания.

Никаких прыжков: они не позволяют вам переходить на разные страницы или экраны. Это может быть приятно, потому что вам не нужно выяснять, где вы были раньше.

Может раздражать. Но если веб-сайты используют их слишком часто или в неподходящее время, они могут очень раздражать. У вас может возникнуть ощущение, что они постоянно появляются перед вашим лицом и мешают вашему потоку мыслей.

Если вы думаете об использовании модальных всплывающих окон, вам следует использовать их правильно. 

Сохраняйте актуальность: используйте их только тогда, когда это действительно имеет смысл. Убедитесь, что то, что вы показываете или спрашиваете, связано с тем, что делает пользователь.

Время имеет значение: не заставляйте их появляться сразу, когда кто-то заходит на ваш сайт. Будьте спокойны, используйте триггеры, которые имеют смысл, например, когда кто-то собирается покинуть ваш сайт или пробыл там некоторое время.

Объясните ясно: расскажите людям, что представляет собой ваше всплывающее окно и что вы от них хотите. Будьте проще, не используйте запутанные слова.

Легко закрыть: сделайте так, чтобы всплывающее окно было очень легко закрыть. Установите кнопку очистки или позвольте людям нажать снаружи, чтобы закрыть ее.

Доступность имеет значение: убедитесь, что каждый может использовать ваши всплывающие окна.

Модальные всплывающие окна похожи на маленькие окна, которые появляются на веб-сайтах. Они могут быть очень полезными или очень раздражающими, в зависимости от того, как их используют. Если все сделано правильно, они могут улучшить вашу работу в Интернете, предоставляя вам необходимую информацию или упрощая работу. 

Но при чрезмерном использовании может возникнуть ощущение, что они все время прямо перед вашим лицом. Поэтому используйте их с умом и убедитесь, что они станут отличным дополнением к вашей веб-игре.