Модальное окно

Содержание:

Внешний вид и содержание
Изменяйте размеры модальных окон
Как подключить модальное окно на нужный блок?
Используйте сетку Bootstrap внутри модальных окон
5 последних уроков рубрики «Разное»
- - Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов
Модальное окно
Эффект затухания
Как работает?
Использование
CSS
Модальное окно
Вызов модального окна с разных кнопок
События
Контроль появления модального окна
Изменяйте содержимое модального окна на основе триггерной кнопки
Описание
Описание скрипта модального окна
Центрируйте окна вертикально

Внешний вид и содержание

Вскользь коснусь внешнего вида.

На небольших экранах диалоговое окно должно занимать 100% его размера. Если ваш диалог будет большим:

Его будет легче «нащупать». Дело в том, что пользователь может взаимодействовать со страницей следующим образом: он водит пальцем по дисплею, а программа чтения с экрана озвучивает то, что в данный момент находится под пальцем.
Пользователю гарантированно не будут озвучиваться элементы «под ним». Иначе, например, VoiceOver на iPad может озвучивать отдельные фрагменты страницы под модальным окном даже «сквозь» оверлей блокирующий доступ указателю.
Вы скроете прокрутку фона на некоторых устройствах при прокрутке контента в диалоговом окне.
Удобнее для одной руки. Если окно растянуто на всю высоту – то у вас есть возможность прижать кнопки управления к нижней части дисплея. Туда намного проще дотянуться одной рукой пользователям современных смартфонов.
Больше места для контента на устройствах с маленьким экраном, таких как iPhone SE.

Заголовок обязателен

У модального окна, как у любой обычной страницы, должен быть свой заголовок. Короткий, точно описывающий его предназначение. Наличие заголовка намного упрощает восприятие пользователем.

Настоятельно рекомендуется использовать для заголовка тег .

Но просто добавить заголовок в диалоговое окно недостаточно. Их нужно ещё и логически «связать». Сделать это можно с помощью атрибута следующим образом:

Теперь, при попадании пользователя в диалоговое окно, в случае с экранным диктором, будет зачитан не только факт наличия диалога, но и его заголовок.

Статический контент должен быть связан с окном

Если в вашем диалоговом окне есть какое-то не интерактивное содержание, например, абзац текста, его стоит связать с диалогом подобно заголовку. Иначе, в некоторых случаях программы чтения с экрана не будут озвучивать такой контент.

Делается это атрибутом :

Если в вашем диалоговом окне много контента, тогда стоит обернуть его в один и связать элемент диалога уже с ним:

Важно! Заголовок и любые кнопки не относящиеся к содержимому, а служащие для управления диалоговым окном, не должны быть включены в элемент на который указывает. Они должны быть вынесены отдельно:

Интерактивные элементы связывать не нужно

Есть другой сценарий, когда содержимое вашего окна состоит из формы без предшествующего ей текста. В таком случае нет необходимости связывать форму с окном:

Элементы формы являются интерактивными. И они будут озвучены скринридером, когда пользователь начнёт с ними взаимодействовать.

Если скомбинировать и статический текст и форму:

Изменяйте размеры модальных окон

Bootstrap modal form

Bootstrap дает вам возможность масштабировать модальные окна. Вы можете создавать малые, большие и очень большие окна, добавив дополнительный класс , или соответственно в элемент с классом. Пример:

<!-- Очень большое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Очень большое окно</button>
    
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Очень большое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-xl</code> совместно с <code>.modal-dialog</code> для создания очень большого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Большое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Большое окно</button>
    
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Большое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-lg</code> совместно с <code>.modal-dialog</code> для создания большого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
    
<!-- Малое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Малое окно</button>
    
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Малое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-sm</code> совместно с <code>.modal-dialog</code> для создания малого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Совет: максимальная ширина модального окна по умолчанию будет 500px, тогда как максимальная ширина малого, большого и очень большого будет 300px, 800px и 1140px, соответственно.

Как подключить модальное окно на нужный блок?

Формы html5: css

Вначале для проверки мы добавим в наше окно форму.

<div id="modal1" class="modal_div">
    <span class="modal_close">X</span>
    <form>
       <input type="text" name="">
       <button>Отправить</button>
    </form>
</div>

Здесь все очень просто, необходимо создать ссылку по нажатию на которую нас перебросит на блок модального окна. Для этого прописываем тег , указываем у него в качестве значения атрибута идентификатор модального окна.

<a href="#modal1" class="open_modal">Открыть мoдaльнoе oкнo modal1</a><!-- ссылкa с href="#modal1", oткрoет oкнo с id = modal1-->

Вот что получилось!

голос

Рейтинг статьи

Используйте сетку Bootstrap внутри модальных окон

Bootstrap text color

Вы также можете использовать сетку Bootstrap в модальных окнах. Просто используйте класс для создания строк и классы , , , и для создания столбцов внутри элемента с классом . Давайте посмотрим на пример:

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Отправить сообщение</h5>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label>Имя</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label>Фамилия</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Комментарий</label>
                            <textarea class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Отправить сообщение</button>
            </div>
        </div>
    </div>
</div>

5 последних уроков рубрики «Разное»

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Модальное окно

Модальные окна обладают одной очень важной особенностью. Их нельзя блокировать браузерами, как всплывающие окна, поэтому они идеально подходят для концентрации внимания пользователей

Для того чтобы сделать обычный div блок модальным окном, ему нужно присвоить класс modal. Также мы можем контролировать наличия таких элементов, как заголовок и контент, путём добавления классов modal-body и modal-header.

<div id="modal" class="modal">
	<div class="modal-header">
		<h2>Lorem Ipsum</h2>
	</div>
	<div class="modal-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat sem ipsum, ut faucibus nulla.
		Nullam mattis volutpat dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque mollis, nibh
		tortor semper elit, eget rutrum purus nulla id quam.</p>
	</div>
</div>

Данный код — это просто html представление, которое вы можете увидеть ниже:

Эффект затухания

Теперь давайте применим ещё одну фишку, а именно, эффект затухания. Для этого div-у модального окна припишем класс fade:

<div id="modal" class="modal hide fade">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h2>Lorem Ipsum</h2>
	</div>
	<div class="modal-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Donec placerat sem ipsum, ut faucibus nulla. Nullam mattis volutpat
		dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque
		mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p>
	</div>
</div>

Теперь открытие и закрытие нашего модального окна будет сопровождаться приятной для глаз анимацией. Данный эффект реализован в большей степень через CSS3.

Как работает?

Псевдо селектор изменяет стиль целевого элемента. Комбинирование указание ссылкой на элемент с : и изменением видимости/прозрачности дает в итоге механизм для вывода/скрытия окна. Для улучшения анимации, которая становится дерганной при использовании , сочетаются :, и

.modal {
opacity: 0;
pointer-events: none;
}

.modal:target {
opacity: 1;
pointer-events: auto;
}

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

.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
…
}

Содержание позиционируется посередине и «приглаживается» тенями, скругленными углами и градиентом.

Есть две анимации. Одна называется “bounce” («прыжок» — происходит масштабирование до немного большего размера, затем возвращается все к норме). Другая называется “minimise”, и она действует в обратном направлении. Для них используется комбинация трансформаций прозрачности контейнера.

Простая трансформация прозрачности:

.modal {
…
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}

Анимация масштабирования, хотя и выполняется в 2D, использует для аппаратного ускорения. Чтобы сделать появление окна более реалистичным тени также анимируются, что создает нагрузку на производительность.

@-webkit-keyframes bounce {
  0% {
        -webkit-transform: scale3d(0.1,0.1,1);
        -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
        -webkit-transform: scale3d(1.08,1.08,1);
        -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
        -webkit-transform: scale3d(0.95,0.95,1);
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
        -webkit-transform: scale3d(1,1,1);
        -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
        -webkit-transform: scale3d(1,1,1);
  }
  100% {
        -webkit-transform: scale3d(0.1,0.1,1);
  }
}

Для изменения анимации при открытии мы используем каскад и переписываем анимацию по умолчанию с использованием ::

.modal > div {
  …
  -webkit-animation: minimise 500ms linear;
}
.modal:target > div {
  -webkit-animation-name: bounce;
}

Кнопка Закрыть является скрытой ссылкой со стилизованным псевдо-элементом ::, который масштабируется при наведении курсора мыши. Так как мы скрываем оригинальную ссылку, то нужно сделать «прыжок» через изменение состояния псевдо-элемента :. Методы традиционная обрезка, выравнивания текста и скрытия видимости не работают, поэтому используются и несколько специфических стилей для .

.modal a {
…
color: transparent;
}

.modal a:after {
content: 'X';
display: block;
…
}

.modal a:focus:after,
.modal a:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a:focus:after {
outline: 1px solid #000;
}

Использование

Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в класс для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .

Через атрибуты

Активируйте модальный элемент без JavaScript. Установите в контролирующем элементе, таком как кнопка, наряду с или , для обращения к функциональности “toggle” для частного модального элемента.

Параметры

Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в , например .

Название	Тип	По умолч.	Описание
backdrop	boolean or the string	true	Подключает модальный элемент с затемненным фоном. Еще – задает для фона, который не закрывает модальный элемент по клику на фоне.
keyboard	boolean	true	Закрывает модальный элемент по нажатию `ESC`.
focus	boolean	true	Фокусируется на модальном элементе по инициализации.
show	boolean	true	Показывает модальный элемент по инициализации.

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Активирует содержимое как модальный элемент. Принимает параметров.

Вручную изменяет состояние модального элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт. (т.е. до того, как произойдет событие или ).

Вручную открывает модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие ).

Вручную прячет модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие ).

Вручную обновляет позицию модального элемента, если высота его изменяется во время открытия (т.е. в случае возникновения полосы прокрутки).

Уничтожает модальный элемент.

События

Модальный элемент в Bootstrap имеет несколько событий для встраивания в функциональность. Все события модальных элементов запускаются внутри самих элементов (т.е. в ).

Тип события	Описание
show.bs.modal	Это событие запускается немедленно, когда экземпляр метода вызван. Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события .
shown.bs.modal	Это событие запускается, когда модальный элемент сделан видимым юзеру (будет ждать завершения переходов CSS). Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события .
hide.bs.modal	Это событие запускается немедленно, когда экземпляр метода вызван.
hidden.bs.modal	Это событие запускается, когда модальный элемент больше не является скрытым (будет ждать завершения переходов CSS).

CSS

А вот и стили для формирования модальных окон:

.main {
    background: #aaa url(../images/bg.jpg) no-repeat;
    width: 800px;
    height: 600px;
    margin: 50px auto;
}
.panel {
    background-color: #444;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #aaa;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #eee;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
.popup label {
    display: inline-block;
    text-align: left;
    width: 120px;
}
.popup input, .popup input {
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    margin: 0;
    padding: 2px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.popup input:hover, .popup input:hover {
    border-color: #555 #888 #888;
}

Модальное окно

Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #okno:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!
    </div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>

Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #okno:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!<br>
	  <a href="#" class="close">Закрыть окно</a>
    </div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :

<div id="zatemnenie">
  <div id="okno">
	Всплывающее окошко!<br>
	<a href="#" class="close">Закрыть окно</a>
  </div>
</div>

Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему и перенаправляем ссылку вызова окна на него.

У дочернего убираем (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  #zatemnenie {
	    background: rgba(102, 102, 102, 0.5);
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: none;
	  }
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		background: #fff;
	  }
	  #zatemnenie:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="zatemnenie">
      <div id="okno">
	    Всплывающее окошко!<br>
	    <a href="#" class="close">Закрыть окно</a>
      </div>
    </div>
	
	<a href="#zatemnenie">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

Вызов модального окна с разных кнопок

Вообще подобная задача — это типичный пример делегирование события. И вот мой пример:

var XMC = function (object){
   // Конструктор 
   this.delegateClick();
}
XMC.prototype.delegateClick = function () {
    // Это нужно потому что в событие this другое значение
    var mf = this;
    // Вешаю событие на window
    window.addEventListener('click', function (event) {
            // Проверяю есть ли у элемента нужный атрибут и правильное ли у него значение
           if(event.target.hasAttribute(mf.selector) && event.target.getAttribute(mf.selector) === mf.selectorValue ){
               // Открываю окно
               mf.show();
           }
    }, mf, false);
    return this;
};

Думаю, что часть читателей этой статьи закроют её, так как уже поняли то, что им нужно. А для ленивых, которые не хотят возиться с кодом я выложил ссылку на github с примером и сейчас расскажу как этим пользоваться.

События

Класс Bootstrap включает несколько событий для подключения к модальной функциональности.

Событие	Описание
show.bs.modal	Событие происходит, когда вызывается метод , предназначенный для открытия модального окна.
shown.bs.modal	Событие происходит, когда модальное окно становится видимым для пользователя, т.е. когда оно будет полностью отрисовано с помощью стилей CSS.
hide.bs.modal	Событие происходит, когда вызывается метод hide(), который предназначен для скрытия модального окна.
hidden.bs.modal	Событие происходит, когда модальное окно становится полностью невидимым для пользователя, т.е. когда будут отработаны полностью все CSS-свойства, выполняющие этот процесс.

В следующем примере отображается сообщение с предупреждением, когда модальное окно станет полностью невидимым для пользователя.

<script>
$(document).ready(function(){
    $("#myModal").on('hidden.bs.modal', function(){
        alert("Модальное окно было полностью закрыто.");
    });
});
</script>

Контроль появления модального окна

Предположим, что модальное окно должно появляться в результате нажатия кнопки. Для этого, в первую очередь, чтобы изначально скрыть блок окна, присвоим ему класс hide:

<div id="modal" class="modal hide">
	<div class="modal-header">
		<h2>Lorem Ipsum</h2>
	</div>
	<div class="modal-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Donec placerat sem ipsum, ut faucibus nulla. Nullam mattis volutpat
		dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque
		mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p>
	</div>
</div>

Теперь можно добавить и кнопку:

<a href="#modal" role="button" class="btn" data-toggle="modal">Click Me</a>

Тут прошу обратить ваше внимание на HTML5 атрибут data-toggle, где мы прописываем id блока модального окна. Ну а теперь, чтобы активировать плагин, добавляем js скрипт:

Ну а теперь, чтобы активировать плагин, добавляем js скрипт:

$('document').ready(function(){
    $('#modal').modal();
});

Теперь, при нажатии на кнопку мы получим примерно такое отображение модального окна:

Изменяйте содержимое модального окна на основе триггерной кнопки

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

<script>
$(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(event){
        // Получить кнопку, которая запустила окно
        var button = $(event.relatedTarget);

        // Извлечь значение из атрибута пользовательских данных- *
        var titleData = button.data("title");
        $(this).find(".modal-title").text(titleData);
    });
});
</script>

Описание

Use the free WordPress popup plugin «Modal Window» to quickly and easily create informative popups. Add the text and media you need, insert shortcodes of forms and much more. Change the behavior of the display of modal windows depending on the user’s actions on the page.

The Modal Window is the unique tool for free use. With its help you can add bright information popup messages to the site, warn visitors about various promotions, display contact forms to increase the conversion of the resource. The WordPress popup plugin will allow you to set the data display in the new format.

Create modal windows and insert any kind of content.

Main features

The WordPress plugin Modal Window will help you quickly get the attention of visitors. Its functionality will make it possible to implement high-quality modal windows for any query.

Place any kind of content
Use the function editor to configure the contents of the block
Change the height and width of windows
Set the window closing options by clicking on Overlay or the Esc key
Change settings for mobile devices
Output of the window via the button or the menu item
Display the modal window depending on user behavior
Use cookies to customize the display of the pop-up block
Copy and paste the shortcode of the window anywhere

Pro version

Discover even more features with the Pro version of the Modal Window plugin:

Create an unlimited number of modal windows
Change the display of the window depending on the user’s status
Set the output of the block on all or individual pages via ID
Modify the behavior of modal windows in accordance with the language of the site
Set limits for screens with the small resolution
Use advanced features to customize the appearance
Insert the background image
Change the start point of the window
Add borders and change their color for each pop-up block
Use the variety of color palettes
Choose the type and behavior of the closing button
Use the time delay for the effective appearance of the block
Set the bright animation when the window appears and closes
Change the duration of the effect at your discretion
Display the button for the modal window in the form of an icon and / or text
Add the animation for the button, change its color and location on the page
Create convenient and functional pop-up panels
Generate unlike icons using the built-in menu «icons»
And more…

The free Modal Window plugin is the best tool to create information pop-up blocks quickly and easy. It allows you to display any kind of content on the page. Add and edit text messages, shortcodes of various forms, images and other media files with its help.

Can be used for:

pop-up notifications;
detailed description of the service or the product;
windows with the contact form;
blocks with large images of products;
pop-up video instructions;
error messages or warnings;
windows with interactive maps and much more.

Use with other plugins to maximize your results

Popup Box – new WordPress popup plugin
Counter Box – powerful creator of counters, timers and countdowns
Button Generator – easily Button Builder
Herd Effects – fake notifications and social proof plugin
Floating Button
Side Menu Lite – add sticky fixed buttons
Sticky Buttons – floating buttons builder
Bubble Menu – circle floating menu
Float menu – awesome floating side menu
Modal Window – create modal window
Wow Skype Buttons
Border Menu
Slide Menu

Frequently Asked Questions

View Answers:

How to create a Modal window?
How to open ‘Modal Window’ via a Side Menu?
How to open a modal window clicking on the link?
How to open a modal window clicking on the button?
How to insert a form into a modal window?
Can I insert a shortcode into the modal window?

Описание скрипта модального окна

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Её JavaScript код представлен посредством функции :

$modal = function (options) {
  var
    _elemModal,
    _eventShowModal,
    _eventHideModal,
    _hiding = false,
    _destroyed = false,
    _animationSpeed = 200;

  function _createModal(options) { ... }
  function _showModal() { ... }
  function _hideModal() { ... }
  function _handlerCloseModal(e) { ... }

  _elemModal = _createModal(options || {});
  _elemModal.addEventListener('click', _handlerCloseModal);
  _eventShowModal = new CustomEvent('show.modal', { detail: _elemModal });
  _eventHideModal = new CustomEvent('hide.modal', { detail: _elemModal });

  return {
    show: _showModal,
    hide: _hideModal,
    destroy: function () { ... },
    setContent: function (html) { ... },
    setTitle: function (text) { ... }
  }
};

В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции .

В имеются следующие переменные , , , , , и функции , , , .

Функция предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях , то сохраним её в переменную :

_elemModal = _createModal(options || {});

Переменные и применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

document.addEventListener('show.modal', function (e) {
  // в e.detail содержится ссылка на открываемое модальное окно
  ...
});
document.addEventListener('hide.modal', function (e) {
  // в e.detail находится ссылка на корневой DOM-элемент закрываемого модального окна
  ...
});

Переменные и используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение во время скрытия окна, в остальных моментах — . Вторая переменная хранит или , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

Переменная используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

Функция предназначена для включения отображения модального окна на странице, а – для его скрытия.

Функция используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

Центрируйте окна вертикально

Просто добавьте класс к элементу с классом , чтобы вертикально отцентрировать окно. Если у модального окна длинный контент, вы можете дополнительно применить класс к , чтобы сделать контентную часть прокручиваемой. Пример:

<!-- HTML-код кнопки (триггер модального окна) -->
<a href="#modalCenter" role="button" class="btn btn-primary" data-toggle="modal">Вертикально-отцентрированное окно</a>

<!-- HTML-код модального окна -->
<div id="modalCenter" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Вертикальное выравнивание</h5>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <p>Здесь текст...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Модальное окно

Внешний вид и содержание

Заголовок обязателен

Статический контент должен быть связан с окном

Интерактивные элементы связывать не нужно

Изменяйте размеры модальных окон

Как подключить модальное окно на нужный блок?

Используйте сетку Bootstrap внутри модальных окон

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Модальное окно

Эффект затухания

Как работает?

Использование

Через атрибуты

Параметры

Методы

Асинхронные методы и переходы

События

CSS

Модальное окно

Вызов модального окна с разных кнопок

События

Контроль появления модального окна

Изменяйте содержимое модального окна на основе триггерной кнопки

Описание

Main features

Pro version

Can be used for:

Use with other plugins to maximize your results

Frequently Asked Questions

Описание скрипта модального окна

Центрируйте окна вертикально