Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).
Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.
Содержание
Заготовка простого всплывающего popup-окна на HTML и CSS
Решение взято с itchief.ru
Всего нужно будет три блока кода:
Используем Код №1:
|
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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!-- HTML модального окна --> <div id="openModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Заголовок</h3> <a href="#close" title="Close" class="close">×</a> </div> <div class="modal-body"> <ul> <li>Содержание</li> <li>Содержание</li> <li>Содержание</li> <li>Содержание</li> </ul> </div> </div> </div> </div> <!-- HTML кнопки --> <a href="#openModal">Открыть модальное окно</a> <!-- CSS-стили модального окна --> <style> /* Стили всплывающего окна по-умолчанию */ .modal { position: fixed; /* фиксированное положение */ top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); /* фон */ z-index: 1050; opacity: 0; /* по умолчанию модальное окно прозрачно */ -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; /* анимация перехода */ pointer-events: none; /* элемент невидим для событий мыши */ margin: 0; padding: 0; } /* При отображении модального окно */ .modal:target { opacity: 1; /* делаем окно видимым */ pointer-events: auto; /* элемент видим для событий мыши */ overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */ } /* ширина модального окна и его отступы от экрана */ .modal-dialog { position: relative; width: auto; margin: 10px; } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 30px auto; /* отображение окна по центру */ } } /* Стили для блока с контентом окна */ .modal-content { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; } @media (min-width: 768px) { .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); box-shadow: 0 5px 15px rgba(0,0,0,.5); } } /* Стили заголовка окна */ .modal-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; border-bottom: 1px solid #eceeef; } .modal-title { margin-top: 0; margin-bottom: 0; line-height: 1.5; font-size: 1.25rem; font-weight: 500; } /* Стили кнопки "х" ("Закрыть") */ .close { float: right; font-family: sans-serif; font-size: 24px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; text-decoration: none; } /* Стили для закрывающей кнопки в фокусе или наведении */ .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; opacity: .75; } /* Стили блока основного содержимого окна */ .modal-body { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px; overflow: auto; } </style> |
Заготовка в плагине для WordPress
Решение 2. Собрал простой плагин popup-окон для сайтов на WordPress. В нем всего 3 файла: .php — макет окон; .js — привязка к триггеру; .css — стили. Пример содержимого в Кодах 2.
Собственно, решил сделать кастомное решение в ситуации, когда кнопки-триггеры на карточке товаров подгружались уже после загрузки всего документа, Ajax-ом. Поэтому попап-формы реализуемые плагинами не срабатывали — скрипт плагина загрузился, собрал триггеры на странице, но нужных мне кнопок еще нет, они появятся при взамодействии пользователя с карточками товаров. А используя кастомное решение, можно в кнопку стригером вставить событие onfocus, которое будет запускать функцию привязки тригера к окну — onmouseover="showModal(trigger, idForm)".
|
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 |
## Подключить скрипты и стили function qfurs_add_script_style_popup(){ wp_enqueue_style( 'qfurs-popup-style', plugin_dir_url(__FILE__) . 'assets/style.css' ); wp_enqueue_script( 'qfurs-popup-script', plugin_dir_url(__FILE__) . 'assets/script.js', array(), '1.0.0', true); } add_action( 'wp_enqueue_scripts', 'qfurs_add_script_style_popup' ); ## Подключить макеты окон function qfurs_HTML_popup (){ ?> <!-- Form 1: Test Form --> <div class="qfurs-modal__container" id="qfurs-modal-1"> <div class="qfurs-modal__content"> <div class="qfurs-modal__close qfurs-close-modal" title="Закрыть">x</div> <p class="modal__title">Заголовок</p> <div class="modal__description"> <p>Контент формы 1</p> </div> </div> </div> <!-- Form 2: Test Form add shortcode --> <div class="qfurs-modal__container" id="qfurs-modal-2"> <div class="qfurs-modal__content"> <div class="qfurs-modal__close qfurs-close-modal" title="Закрыть">x</div> <p class="modal__title">Заказать звонок</p> <div class="modal__description"> <?php /* echo do_shortcode('[contact-form-7 id="5" title="Заказать звонок"]'); */ ?> </div> </div> </div> <?php } add_action('wp_footer','qfurs_HTML_popup', 200); |
В файле popup-custom-qfurs.php подключаем скрипты и стили правильно. Если делать не через плагин, следовательно нужно будет заменить путь к файлам и функцию plugin_dir_url(__FILE__) на функцию для темы.
Вторым этапом выводим в подвал сайта HTML-макет всплывающих окон. Можно убрать лишнее или по аналогии добавить ещё. Ключевым здесь является id контейнера всплывающего окна, должен быть уникальным, т.к. привязывается к триггеру.
|
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 |
/* SHOW-CLOSE MODAL */ function showModal (openTrigger, modalContent){ let openBtn = document.querySelectorAll(openTrigger); let modalContainer = document.querySelector(modalContent); if ( openBtn && modalContainer ){ /* show modal */ for ( let i = 0; i < openBtn.length; i++ ){ openBtn[i].addEventListener('click', function(){ modalContainer.classList.add('qfurs-show-modal'); }); } /* close modal */ let qfurs_closeBtn = modalContainer.querySelector('.qfurs-close-modal'); qfurs_closeBtn.addEventListener('click', function(){ modalContainer.classList.remove('qfurs-show-modal'); }); } } /* Активация popup Привязка popup qfurs-modal-1 и -2 к триггеру qfurs-trigger-1 и -2 */ document.addEventListener('DOMContentLoaded', function(){ showModal('.qfurs-trigger-1','#qfurs-modal-1'); showModal('.qfurs-trigger-2','#qfurs-modal-2'); }); |
script.js активируем popup функцией showModal(), где первым параметром задаем триггер — класс кнопки или элемента по клику на который должно появиться окно, вторым параметром указываем id формы которая должна открыться.|
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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
/*=============== VARIABLES CSS ===============*/ :root { --big-font-size: 1.3rem; --normal-font-size: .938rem; --z-modal: 100000; } @media screen and (min-width: 968px) { :root { --big-font-size: 1.3rem; --normal-font-size: 1rem; } } .qfurs-modal__container{ position: fixed; top: 0; left: 0; background-color: #0000009e; width: 100%; height: 100%; display: grid; align-items: flex-end; overflow: hidden; transition: all .3s; z-index: var(--z-modal); visibility: hidden; opacity: 0; /*=== Effect 3 ===*/ /* perspective: 1000px; */ } .qfurs-modal__content{ position: relative; background-color: #ffffff; text-align: center; padding: 3rem 2rem 2rem; border-radius: 3px 3px 0 0; transition: all .3s; /*=== Effect 1 ===*/ transform: translateY(10%); /*=== Effect 2 ===*/ /* transform: scale(.5) translateY(10%); */ /*=== Effect 3 ===*/ /* transform: rotateX(65deg) scale(.75) translateY(10%); transform-origin: 50% 100%; */ } /* Show modal */ .qfurs-show-modal { visibility: visible; opacity: 1; } .qfurs-show-modal .qfurs-modal__content { /*=== Effect 1 ===*/ transform: translateY(0); /*=== Effect 2 ===*/ /*transform: scale(1) translateY(0);*/ /*=== Effect 3 ===*/ /* transform: rotateX(0) scale(1) translateY(0); */ } /*=============== BREAKPOINTS ===============*/ /* For small devices */ @media screen and (min-width: 576px){ .qfurs-modal__content{ margin: auto; width: 380px; border-radius: 3px } } .qfurs-modal__close { display: inline-flex; background-color: #000000; border-radius: 3px; color: #ffffff; font-size: 1rem; position: absolute; top: 5px; right: 5px; cursor: pointer; line-height: 1; padding: 1px 5px 2px; transition: 0.4s; } .qfurs-modal__close:hover { background-color: #ffffff; color: #000000;} .modal__title{ font-size: var(--big-font-size); font-weight: 500; text-transform: uppercase; } |
Примеры всплывающего окна на сайте
Несколько примеров из Codepen, на которые можно перейти и посмотреть более подробно.
Модальные окна на HTML и CSS
See the Pen
Модальные всплывающие окна с помощью CSS3 без Javascript by vavik (@vavik96)
on CodePen.
See the Pen
Pop-up design by fajjet (@fajjet)
on CodePen.
See the Pen
Pop Up Login Form by Afdallah Wahyu Arafat (@codot)
on CodePen.
Модальные окна с JavaScript
See the Pen
Responsive Modal Design by qfurs (@qfurs)
on CodePen.
See the Pen
Resposive Pop-up on css3 by Daniel (@31russ)
on CodePen.
See the Pen
Pop-up Dialog Box (LIGHTBOX) by Dominic Francois (@DominicFrancois)
on CodePen.
See the Pen
Responsive CSS and JS Pop-up by Rachel Bull (@rachel_web)
on CodePen.
See the Pen
Smart Welcome Popup by Harjeet Singh (@sharjeet)
on CodePen.
See the Pen
Daily UI 016 — Pop Up (ReactJs) by Chase Allbee (@ChaseAllbee)
on CodePen.
See the Pen
Modal Animations by qfurs (@qfurs)
on CodePen.
See the Pen
Custom popup modal In pure javascript by sajid ali (@sajidnagari)
on CodePen.
See the Pen
Responsive Popup Modal by iilhamriz (@iilhamriz)
on CodePen.