Делаем попап без плагина fancybox
Цель — сделать 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
Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна…
Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый…
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому…
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….
5 комментариев
Ответить
Спасибо, разобрался, самый нормальный способ который нашел
Вопрос как использовать несколько раз скрипт на одной странице
Обновил статью, лучше бы классы и переменные назвать как-то более рационально, но писался данный скрипт быстро с планами на ревизию, но руки не дошли еще. Так же и пример с несколькими всплывающими окнами был написан за 5 минут, но должно все работать.
100% Рабочая модель
Внимательно реализуем
Спасибо за встроенный пример от codepen — нашел по ссылке ваши примеры там и взял popup contact form https://codepen.io/deniscreative/pen/pwyxWg
Как исключайте показы окна тем посетителям, которые повторно пришли на ресурс?