Автоматический всплывающее модальное окно после загрузки страницы HTML + CSS + Javascript

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

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

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

Пример:

Структура проекта:

Структура папок состоит из папки проекта – Automatic Pop up. Эта папка проекта включает в себя три файла 

• index.html, 
• style.css
• script.js. 

Это файл HTML, таблица стилей и файл javascript соответственно.

После успешного создания этих файлов приступаем к кодированию. Скопируйте приведенный ниже код и вставьте его в HTML-файл. Начнем с создания div с именем класса popup. Внутри этого div у нас есть кнопка с id close. Элементы h2 и p с демонстрационным текстом и, наконец, ссылка.

HTML КОД:

<div class="popup"> <button id="close">×</button> <h2>This Is The Title</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui, commodi minima magni ullam aliquam dignissimos? </p> <a href="#">Let's Go</a> </div>

Теперь перейдем к CSS, мы добавим несколько стилей в pop-upполе. Скопируйте приведенный ниже код и вставьте его в свою таблицу стилей. Мы применяем базовый сброс CSS, чтобы удалить отступы и поля, добавленные в HTML-документ по умолчанию браузерами. Затем мы добавляем «#0f72e5» в качестве цвета фона тела.

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

CSS КОД:

.popup{ background-color: #ffffff; width: 450px; padding: 30px 40px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; font-family: "Poppins",sans-serif; display: none; text-align: center; } .popup button{ display: block; margin: 0 0 20px auto; background-color: transparent; font-size: 30px; color: #c5c5c5; border: none; outline: none; cursor: pointer; } .popup p{ font-size: 14px; text-align: justify; margin: 20px 0; line-height: 25px; } a{ display: block; width: 150px; position: relative; margin: 10px auto; text-align: center; background-color: #0f72e5; color: #ffffff; text-decoration: none; padding: 5px 0; }

Переходя к javascript, скопируйте приведенный ниже код и вставьте его в свой файл javascript. Мы добавляем прослушиватель событий load в окно документа. Внутри у нас есть , setTimeout()который содержит функцию для установки отображения всплывающего окна на «блок». Позволяет setTimeout()нам отображать всплывающее окно только по прошествии некоторого времени. Вы можете изменить эту продолжительность в соответствии с вашими потребностями.

Наконец, мы добавляем событие клика к кнопке закрытия. Событие клика запускает функцию, которая снова устанавливает отображение всплывающего окна на «none». И всплывающее окно готово.

JAVASCRIPT КОД:

window.addEventListener("load", function(){ setTimeout( function open(event){ document.querySelector(".popup").style.display = "block"; }, 1000 ) }); document.querySelector("#close").addEventListener("click", function(){ document.querySelector(".popup").style.display = "none"; });

Итак, что вы думаете о всплывающих окнах? Они раздражают, и их следует избегать, или они являются важным аспектом онлайн-рекламы. Дайте мне знать в комментариях ниже. Удачного кодирования!