05.11.2016
Цель – сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без использования javascript, но нам нужен стабильно работающий в во всех браузерах вариант, поэтому js мы все же здесь используем.
HTML
Упрощенный вариант нашего HTML-кода.
<a id="popup" href="javascript:void(0);">Open</a> <div class="pop-overlay"> <div id="popup-window" class="popup-window"> <div class="inner"> <h4>Installing WordPress</h4> <p>WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help. Now with Automatic Upgrade, upgrading is even easier.</p> </div> <a href="javascript:void(0);" class="btn-close">Close</a> </div> </div>
JS
Перед скриптом должна быть подключена библиотека jquery, например
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Если у вас она уже подключена, то не нужно подключать ее еще раз.
Такой у меня получился js-код
<script> var $popUp = $('#popup'); var $popOverlay = $('.pop-overlay'); var $popWindow = $('#popup-window'); var $popClose = $('.popup-window .btn-close'); $popUp.on('click', function(){ $popOverlay.fadeIn(); $popWindow.fadeIn(); }); $popClose.on('click', function(){ $popOverlay.fadeOut(); $popWindow.fadeOut(); }); $(function(){ $(document).on('click', function(event) { if ($(event.target).closest($popUp).length) return; if ($(event.target).closest($popWindow).length) return; $popOverlay.fadeOut(); $popWindow.fadeOut(); event.stopPropagation(); }); }); </script>
CSS
Упрощенный вариант стилей css
<style> *{ margin: 0; padding: 0; } .pop-overlay { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 100; } .popup-window { display: none; position: absolute; background: #fff; width: 90%; max-width: 520px; left: 50%; margin-left: -260px; margin-top: 20px; padding: 15px; border-radius: 5px; font-size: 1em; line-height: 1.2em; text-align: right; box-sizing: border-box; } .popup-window .inner { max-height: 360px; overflow-y: auto; background: #F4F4F4; padding: 10px; margin-bottom: 10px; text-align: left; } .popup-window .btn-close { display: inline-block; border: 1px solid #848484; border-radius: 3px; padding: 0 15px; color: #444444; line-height: 1.8em; text-decoration: none; } .popup-window .btn-close:hover, .popup-window .btn-close:active, .popup-window .btn-close:focus { text-decoration: none; background: #f4f4f4; } @media screen and (max-width: 600px) { .popup-window { margin-left: -45%; } } </style>
Скриншот
Пример работы данного скрипта для нескольких всплывающих окон на странице
See the Pen Popup window without Fancybox by Denis (@deniscreative) on CodePen.0
Комментарии (4) к “Делаем попап без плагина fancybox”
Владимир
Спасибо, разобрался, самый нормальный способ который нашел
Евгения
Вопрос как использовать несколько раз скрипт на одной странице
Denis Creative
Обновил статью, лучше бы классы и переменные назвать как-то более рационально, но писался данный скрипт быстро с планами на ревизию, но руки не дошли еще. Так же и пример с несколькими всплывающими окнами был написан за 5 минут, но должно все работать.
Евгения
100% Рабочая модель
Внимательно реализуем