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

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

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

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

Автоматический всплывающее модальное окно сразу после загрузки сайта / Automatic modal popup right after the site loads

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

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

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


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

Структура папок состоит из папки проекта – Automatic Pop up. Эта папка проекта содержит три файла – index.html, style.css и script.js. Это HTML-файл, таблица стилей и файл javascript соответственно.

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

HTML КОД:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Automatic Popup</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <!--Stylesheets-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

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

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

CSS КОД:

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #0f72e5;
}
.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";
});

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


0 Комментарии