Всплывающее (модальное, popup) окно HTML и CSS + Примеры

Содержание

Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).

Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.

Заготовка простого всплывающего popup-окна на HTML и CSS

Всего нужно будет три блока кода:

HTML модального окна (изначально оно будет скрыто);
HTML вывода ссылки при нажатии на которые будет появляться popup окно;
CSS-стили благодаря которым модальное окно будет появляться или скрываться.

Пример: Что такое всплывающее окно

ОТКРЫТЬ ОКНО

Используем Код №1:


<!-- 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>

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

<h3 class="modal-title">Заголовок</h3>

</div>

<ul>

<li>Содержание</li>

</ul>

</div>

<a href="#openModal">Открыть модальное окно</a>

<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>

Код №1: Заготовка простого всплывающего popup-окна HTML + CSS

Заготовка в плагине для WordPress

Решение 2. Собрал простой плагин popup-окон для сайтов на WordPress. В нем всего 3 файла: .php — макет окон; .js — привязка к триггеру; .css — стили. Пример содержимого в Кодах 2.

Скачать заготовку плагина всплывающих окон popup-custom для WordPress.

Собственно, решил сделать кастомное решение в ситуации, когда кнопки-триггеры на карточке товаров подгружались уже после загрузки всего документа, Ajax-ом. Поэтому попап-формы реализуемые плагинами не срабатывали — скрипт плагина загрузился, собрал триггеры на странице, но нужных мне кнопок еще нет, они появятся при взамодействии пользователя с карточками товаров. А используя кастомное решение, можно в кнопку с тригером вставить событие onfocus, которое будет запускать функцию привязки тригера к окну — onmouseover="showModal(trigger, idForm)".


## Подключить скрипты и стили
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);

## Подключить скрипты и стили

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 (){ ?>

<p class="modal__title">Заголовок</p>

<div class="modal__description"> <p>Контент формы 1</p> </div>

</div>

<p class="modal__title">Заказать звонок</p>

</div>

<?php

}

add_action('wp_footer','qfurs_HTML_popup', 200);

Код 2.1: popup-custom-qfurs.php

В файле popup-custom-qfurs.php подключаем скрипты и стили правильно. Если делать не через плагин, следовательно нужно будет заменить путь к файлам и функцию plugin_dir_url(__FILE__) на функцию для темы.

Вторым этапом выводим в подвал сайта HTML-макет всплывающих окон. Можно убрать лишнее или по аналогии добавить ещё. Ключевым здесь является id контейнера всплывающего окна, должен быть уникальным, т.к. привязывается к триггеру.


/* 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');
});

/* 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');

});

Код 2.2: Файл script.js

В файле script.js активируем popup функцией showModal(), где первым параметром задаем триггер — класс кнопки или элемента по клику на который должно появиться окно, вторым параметром указываем id формы которая должна открыться.


/*=============== 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;
}

100

101

102

103

104

/*=============== 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;

}

Код 2.3: Файл стилей style.css

Примеры всплывающего окна на сайте

Несколько примеров из Codepen, на которые можно перейти и посмотреть более подробно.

Модальные окна на HTML и CSS

See the Pen
Модальные всплывающие окна с помощью CSS3 без Javascript by vavik (@vavik96)
on CodePen.

Пример popup-окна №1: HTML и CSS

See the Pen
Pop-up design by fajjet (@fajjet)
on CodePen.

Пример всплывающего окна №2: HTML и CSS

See the Pen
Pop Up Login Form by Afdallah Wahyu Arafat (@codot)
on CodePen.

Пример всплывающей формы входа №3: HTML и CSS

Модальные окна с JavaScript

See the Pen
Responsive Modal Design by qfurs (@qfurs)
on CodePen.

Пример popup-окна №1: HTML, CSS, JS

See the Pen
Resposive Pop-up on css3 by Daniel (@31russ)
on CodePen.

Пример попап-окна №2: HTML, CSS, JS

See the Pen
Pop-up Dialog Box (LIGHTBOX) by Dominic Francois (@DominicFrancois)
on CodePen.

Пример модального окна №3: HTML, CSS, JavaScript

See the Pen
Responsive CSS and JS Pop-up by Rachel Bull (@rachel_web)
on CodePen.

Пример всплывающего окна №4: HTML, CSS, JavaScript

See the Pen
Smart Welcome Popup by Harjeet Singh (@sharjeet)
on CodePen.

Пример модального окна приветствия №5: HTML, CSS, JavaScript

See the Pen
Daily UI 016 — Pop Up (ReactJs) by Chase Allbee (@ChaseAllbee)
on CodePen.

Пример модального окна №6: HTML, CSS, JavaScript

See the Pen
Modal Animations by qfurs (@qfurs)
on CodePen.

Пример модального окна №7: Подборка нескольких всплывающих окон на HTML, CSS и JavaScript

See the Pen
Custom popup modal In pure javascript by sajid ali (@sajidnagari)
on CodePen.

Пример модального окна №8: Кастомное всплывающее окно на HTML, CSS + JavaScript

See the Pen
Responsive Popup Modal by iilhamriz (@iilhamriz)
on CodePen.

Пример модального окна №9: Адаптивное всплывающее окно на HTML, CSS + JavaScript