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

 

С помощью CSS3 и небольшого Javascript

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

 

 

 

Преамбула

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

 

Меня больше заинтересовала техническая сторона вопроса и методы его решения.

 

Придумывать особо ничего не пришлось, все давно придумано и прекрасно работает. Сегодня вместе с вами, мы разберем детально, как проще всего реализовать модальное окно всплывающее при загрузке сайта, используя в работе магию новых свойств CSS3 и совсем небольшого javascript, чтобы усыпить бдительность браузеров и иметь контроль над временем появления информационного блока.

 

Всплывающее окно

Рис. 1 - Пример всплывающего окна

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

 

 

Разметка HTML

Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент <div id="overlay"> отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера <div class="popup"> будет размещаться само содержание модального окна. Также нам нужно организовать ссылку для закрытия окна. Для наглядного примера разместим простой заголовок и парочку параграфов текстового содержания. В итоге мы получим полную разметку нашего окна примерно такого вида:

 

В материале используется быстрый и удобный web-метод копирования кода:
В блоке <pre>, где отображается HTML-, или CSS-код — встроена кнопка для копирования этого кода. При нажатии,— код автоматически копируется в буфер обмена.

 

<!-- Модальное Окно -->
<div id="overlay">
    <div class="popup">
        <h2>Модальное Окно!</h2>
        <p>
            Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.
         </p>
         <div class="pl-left">
               <img src="/images/article/pop-up/retro.jpg">
         </div>
         <p>Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.</p>
         <div class="pl-right">
               <img src="/images/article/pop-up/tsyrc.jpg">
         </div>
<p>Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.</p>
       <p>
           Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1
       </p>
        <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
    </div>
</div>

 

Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой javascript и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот javascript лучше всего в конце тела страницы html перед закрывающим тегом </body>. Ну а сам скрипт состоит всего лишь из нескольких строк:

 

<script type="text/javascript">
        var delay_popup = 5000;
        setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
</script>

 

В примере время появления окна выставлено в 5000, что соответствует примерно 5 секундам, вы можете прописать любое другое значение.

Для закрытия окна мы просто используем стандартную кнопку, тег <button> с onclick событием и определенным классом class=”close”, для возможности оформления внешнего вида через стили CSS

 

<button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>

 

Таким образом, мы подошли к самому интересному моменту(на мой взгляд), к формированию стилей всплывающего окна.

 

Стили CSS

Для начала, создадим идентификатор #overlay с помощью которого мы свяжем наше окно с javascript и сформируем базовый контейнер <div id="overlay"> для всплывающего окна.

 

#overlay {
	position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}

 

Для основы нашего окна выставляем фиксированное положение position: fixed;, то есть, если вы будете прокручивать страницу при открытом окне, оно остаётся на месте. Зададим чёрный цвет для фона и добавим ему лёгкую прозрачность с расширением на весь экран. За счет использования свойства z-index, фон располагается поверх всех остальных элементов.

В завершении, с помощью свойства display: none;, скроем его до момента активации javascript.

Теперь, давайте перейдем непосредственно к оформлению внешнего вида самого модального окна. Здесь всё так же очень просто. Создаем связующий идентификатор #popup и уже в нем определяем все необходимые параметры нашего всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливаем стиль и цвет границы вокруг элемента, добавляем эффект тени и немного закругляем углы нашего информационного блока.

 

.popup {
    top: 25%;
    left: 0;
    right: 0;
    font-size: 14px;
    margin: auto;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #383838;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}

 

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

 

Закрываем окно

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

 

.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(0, 131, 119, 0.9);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
/* кнопка закрытия при наведении */
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
}

 

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

 

Выводы

Все! Дорогие друзья. Если вы сделаете все правильно, то получите в свое распоряжение всплывающее окно при загрузке сайта, с возможностью управления временем появления. Как вы воспользуетесь этой техникой исполнения, зависит только от вас. Но упаси вас Бог, размещать в таких окнах разного рода «шнягу-шняжную» и уж тем более блокировать возможность закрытия окна.

Уважайте своих пользователей и они к вам потянутся.



Полезное

 

  1. Как работает VPN?

  2. Адаптивное видео


Источник: DBMast.ru

 

Поделиться:

Добавить комментарий

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

 

Hosting CityHost

Внимание! Это самый лучший хостинг, который я выбрал! И за приемлемую цену...
Мой сайт - Joomlasite.net появился на хостинге с середины июня 2024 года. Так как это мой первый сайт, который выложил в интернет, то опыта работы на хостинге оказалось совсем мало. Были обнаружены некоторые ошибки, как в структуре сайта, так и особенно много появилось проблем с индексацией в поиске... Но сейчас это уже в прошлом...
Очень благодарен Службе поддержки в которую обращался много раз за помощью. Все проблемы разрешались очень грамотно и оперативно в разное время суток.
Несколько слов о загрузке сайта,- сайт загружается очень быстро, без сбоев, как на компьютере, так и на мобильном устройстве.
Никаких трудностей с работой на хостинге не испытываю, и за пользование которым - оплатил двухгодичный тариф. Перед этим был бесплатный тестовый период в течение 10-и дней, и после которого - без сомнений и колебаний решил остаться на этом ресурсе.
Хочется отметить очень классную Панель управления хостингом - простая, информативная и интуитивно понятная. Все возможности настроек, как сайта, так и хостинга выполнены грамотно и профессионально.
Сервера хостинга находятся в Украине, Финляндии и Германии,- мой сайт размещен на немецком сервере.
На этом свои впечатления об этом хостинге заканчиваю, и настоятельно рекомендую всем сайтостроителям - воспользоваться лучшим украинским хостингом CityHost.