Содержание
Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).
Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.
Заготовка простого всплывающего popup-окна на HTML и CSS
Всего нужно будет три блока кода:
- HTML модального окна (изначально оно будет скрыто);
- HTML вывода ссылки при нажатии на которые будет появляться popup окно;
- CSS-стили благодаря которым модальное окно будет появляться или скрываться.
ОТКРЫТЬ ОКНО
Используем Код №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.
(Пока оценок нет)
Загрузка...