Popup-окно с заданным интервалом всплывания
Для реализации всплывающего окошка с заданным периодом всплывания понадобится знания верстки и минимальные знания JS и PHP.
Для начала разметим наше окошко:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="modal" class="modal-window"> <div id="close">x</div> <form action="#" class="modal-form"> <span class="modal-window__title common__title2">Хотите поучаствовать в розыгрыше подарков?</span> <div class="modal-form__name">Имя</div> <input type="text" name="name" class="modal-form__field"> <div class="modal-form__name">Ваш телефон</div> <input type="text" name="phone" class="modal-form__field maskedphone"> <div class="modal-form__name">Ваш вопрос</div> <input type="text" name="question"> <textarea name="question" class="modal-form__field "> </textarea> <div class="modal-buttons"> <button type="submit" class="modal-form__btn">Отправить</button> </div> </form> </div> |
Оформим его:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
#modal{ display:none; } .modal-window { color: #fff; padding: 35px 25px 20px 25px; position: fixed; z-index: 99; top: 30%; width: 330px; margin-left: -150px; left: 50%; background: #f0f1ec; background: rgba(46, 141, 187, 0.9); box-shadow: 1px 5px 7px rgba(0, 0, 0, 0.6); margin-top: 10px; margin-right: -20px; } #close { color: #fff; position: absolute; right: 10px; font-size: 30px; top: 0px; cursor: pointer; font-weight: bold; } .modal-window__title { color: #fff; font-size: 24px; text-transform: uppercase; } .modal-window input, .modal-window textarea { border: 2px solid #fff; width: 300px; padding: 10px; margin-top: 10px; } .modal-form__name { margin-top: 15px; } .catalog-el-wrapper .addtoCart, .modal-window .modal-form__btn, body #auth-block.info-block input[type="submit"] { display: inline-block; padding: 10px; margin: 0 10px 10px 0; border: 0; text-transform: uppercase; background: #2ba00b; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #128c2e), color-stop(1, #21b607)); background: -ms-linear-gradient(bottom, #128c2e, #21b607); background: -moz-linear-gradient(center bottom, #128c2e 0%, #21b607 100%); font: 16px 'PT Sans', Arial, sans-serif; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); border-radius: 4px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); line-height: 17px; color: #fff; text-decoration: none; margin-top: 10px; } #overlay{ z-index:98; opacity:0.8; position:absolute; top:0; left:0; background:black; width:100%; height:100%; } |
Здесь происходит внешнее оформление окна и фона затемнения. С помощью свойства display делаем их невидимыми и приступаем к написанию кода который будет отвечать за всплывание окна.
Прежде чем начать работу по созданию модального окна, убедитесь что библиотека jQuery к вашему сайту уже подключена. Так же необходимо подключить плаuин cooke. Скачать его можно на официальной странице плагина https://plugins.jquery.com/cookie/. После этого вызовите функцию, которая будет выполнять скрипты после полной загрузки страницы.
|
1 2 3 |
$(document).ready(function(){ }); |
Далее внутри этой функции пишем код отвечающий за всплывание окна и его закрытие:
|
1 2 3 4 5 6 7 8 |
var docHeight = $(document).height();//получаем высоту страницы $("body").append("<div id='overlay'></div>");//добавляем фон с затемнением $('#overlay').height('docHeight');//устанавливаем высоту фона $("#modal").css("display","block");//делаем наше окошко видимым $("#close").click(function(){//закрываем окно и фон с затемнением при клике на крестик $("#modal").css("display","none"); $("#overlay").css("display","none"); }); |
Но нам не нужно чтобы форма всплывала каждый раз при загрузке страницы. Для того чтобы задать нужный интервал для всплывания создадим в самом начале страницы куки и по ней будем проверять показывать окно или нет:
|
1 2 3 4 5 6 7 |
<?php if(!isset($_COOKIE['modal'])) { $value = "viewed"; $modal = setcookie("modal", $value, time()+259200); } ?> |
Здесь мы проверяем наличие в глобальном массиве $_COOKIE наличие куки с именем modal и если её в массиве нет, то устанавливаем еес временем жизни трое суток для примера.
Перед запуском нашего скрипта поставим проверку на существование куки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php if(!isset($_COOKIE['modal'])){ ?> <div id="modal" class="modal-window"> <div id="close">x</div> <span class="modal-window__title common__title2">Хотите поучаствовать в розыгрыше подарков?</span> <form action="#" class="modal-form"> <div class="modal-form__name">Имя</div> <input type="text" name="name" class="modal-form__field"> <div class="modal-form__name">Ваш телефон</div> <input type="text" name="phone" class="modal-form__field maskedphone"> <div class="modal-form__name">Ваш вопрос</div> <input type="hidden" name="type" value="question"> <textarea name="question" class="modal-form__field "> </textarea> <div class="modal-buttons"> <button type="submit" class="modal-form__btn common__btn">Отправить</button> </div> </form> </div> <script> $(document).ready(function(){ var docHeight = $(document).height();//получаем высоту страницы $("body").append("<div id='overlay'></div>");//добавляем фон с затемнением $('#overlay').height('docHeight');//устанавливаем высоту фона $("#modal").css("display","block");//делаем наше окошко видимым $("#close").click(function(){//закрываем окно и фон с затемнением при клике на крестик $("#modal").css("display","none"); $("#overlay").css("display","none"); }); }); </script> <?php }?> |
Вот и все мы создали всплывающее окно, которое будет показываться посетителю раз в трое суток.