Сначала сделаем просто окошко всплывающее с задержкой при загрузке страницы. Пример того что у нас с Вами получится можно посмотреть ниже.
Сначала добавим HTML код нашего окошка. Тут все просто. Основной блок самого окна с id="msg_pop", и кнопка закрытия с class="msg_close".
<div id="msg_pop">
<span class="msg_close" onclick="document.getElementById('msg_pop').style.display='none'; return false;">X</span>
<h4>Заголовок</h4>
Пример модального окна, всплывающего при загрузке сайта.
</div>
Так же, как видите кнопке закрытия окна добавлено событие - onclick. Дело в том, что окно будет вызываться с помощью простенького javascript, без использования jQuery. Но, чтобы закрыть окно нужно добавить событие onclick.
Забегая наперед, скажу, что можно это окошко запускать нажатием на любой элемент - ссылку,span,div и тд. То есть, если Вам не нужно запускать окно автоматом с задержкой, а именно при нажатии на кнопку или ссылку и тд., то нужно будет пропустить шаг с добавлением скрипта, а вместо этого тому элементу, при нажатие на который должно быть вызвано окошко - тоже добавить событие onclick.
И так, как пример у нас будет кнопка - обычный span. Вам нужно взять свой элемент и ли такой же span и добавить туда событие, в результате получится примерно так:
<span onclick="document.getElementById('msg_pop').style.display='block'; return false;" >Кнопка</span>
Теперь добавим скрипт автоматического вызова окна. Если Вы решили запускать окно с кнопки, как описано выше, то пропустите этот шаг.
В шапку сайта или подвал, особо не важно, можно рядом с самим окошком добавить вот такой маленький скрипт.
<script type="text/javascript">
var delay_popup = 2000;
var msg_pop = document.getElementById('msg_pop');
setTimeout("document.getElementById('msg_pop').style.display='block';document.getElementById('msg_pop').className += 'fadeIn';", delay_popup);
</script>
Тут Вам, по сути, доступна лишь одна настройка - время задержки. Это первая строка - 2000 миллисекунд.2000 - это 2 секунды. Меняйте значение на свое и можете увеличить или уменьшить время задержки. Так же в скрипте несколько раз указан айди основного блока окна - msg_pop. Если Вы решите сменить айди на свой, то не забудьте сменить и в скрипте.
Ну и последний шаг - это стили самого окна. Расписывать подробно, что за что отвечает не буду. Изучайте CSS. Это просто, легко и очень пригодится Вам, если Вы решили сами заниматься вебмастерством. В стилях все просто, если вы знакомы с CSS.
#msg_pop{
background-color: rgba(0, 0, 0, 0.7);
display: none;
position: fixed;
z-index: 99999;
bottom: 30px;
left:30px;
width: 250px;
padding: 10px;
color:#fff;
font-size:13px;
line-height:13px;
-webkit-box-shadow: 0px 0px 10px #999;
-moz-box-shadow: 0px 0px 10px #999;
box-shadow: 0px 0px 10px #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#msg_pop h4{
margin:0;
text-align:center;
font-size:15px;
}
#msg_close{
display:block;
position:absolute;
top:5px;
right:10px;
line-height:15px;
width:16px;
height:16px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
#msg_close:hover {
background-color:#fff;
color:#000;
}
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.4s;
-webkit-animation-duration: 0.4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% {transform: scale(0.7);opacity: 0.5;}
80% {transform: scale(1.1);}
100% {transform: scale(1);opacity: 1;}
}
@-webkit-keyframes fadeIn {
0% {-webkit-transform: scale(0.7);opacity: 0.5;}
80% {-webkit-transform: scale(1.1);}
100% {-webkit-transform: scale(1);opacity: 1;}
}
Скажу лишь то что тут три основных параметра. Первый, это параметры для основного блока с айди - msg_pop.Тут главное условие - display: none;
Дальше параметры для кнопки закрытия - msg_close. Ну и последнее это класс fadeIn и свойства @keyframes - для создания анимации.
Скажу еще одну ВАЖНУЮ! вещь. В свойствах анимации есть параметр animation-duration: 0.4s; и еще один его клон для хрома. Это время анимации. Как видите оно больше времени задержки окна. Если вы увеличите время задержки, то нужно будет поиграться и с временем анимации, да и с ее визуализацией. В противном случаи, анимация будет заканчиваться еще до того, как появится окно.
Бонус
Если Вы решили сделать так, чтобы окно появлялось всего лишь раз в сутки, например, или раз в час, то Вам нужен этот способ. Скажу сразу, он уже использует - jQuery.
Показ раз в сутки будет осуществляться с помощью cookie. Стили и код окна остается тот же. Вместо яваскрипта, нужно добавить немного другой скрипт. Пример того, что получится можете посмотреть в примере ниже.
Для начала, нужно подключить библиотеку - jQuery. Если это делалось раньше или это делает движок Вашего сайта, то это делать не нужно. Подключать нужно в шапке или в подвале сайта.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Дальше подключаем файл отвечающий за формирование cookie. Данный файл нужно скачать - jquery.cookie.js
Подключить файл куков нужно после библиотеки указав путь к папке, где вы его расположили, если он находится в той же папке где и файл с html, то просто его название.
<script src="jquery.cookie.js"></script>
Далее сам скрипт, который задействует куки и вызывает окно. Это скрипт jQuery и он будет работать вместо java скрипта, что был добавлен в начале статьи. То есть, вместо него нужно добавить новый:
<script type="text/javascript">
jQuery(document).ready(function($){
$("#msg_close").click(function () {
$.cookie("msg_pop", "", {expires: 0} );
$("#msg_pop").hide();
});
if ( $.cookie("msg_pop") == null ){
setTimeout(function(){
$("#msg_pop").addClass("fadeIn");
$("#msg_pop").show();
}, 2000)
}});
</script>
Тут по сути тоже не много настроек. Про имена айди и классов, я думаю понятно, где что и в случаи изменения менять нужно и здесь.
В 3 строке указано время действий куков. Оно равно длине сессии. Если Вы хотите его изменить, то ознакомьтесь с статьей - Всплывающее окно при загрузке странице показывается один раз с задержкой. Там есть инструкция по этому поводу. Повторно разъяснять не вижу смысла.
В предпоследней строке, опять то же число 2000. Это тот же параметр что и в первом - время задержки.
Вот собственно и все, что нужно для осуществления второго варианта с куками. Пробуйте, экспериментируйте и получите нужный результат.
На этом все, спасибо за внимание. 🙂
