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

CSS стили модального окна

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

.modalbackground {
margin: 0; /* убираем отступы */
padding: 0; /* убираем отступы */
position: fixed; /* фиксируем положение */
top:0; /* растягиваем блок по всему экрану */
bottom:0;
left:0;
right:0;
background: rgba(0,0,0,0.5); /* полупрозрачный цвет фона */
z-index:100; /* выводим фон поверх всех слоев на странице браузера */
opacity:0; /* Делаем невидимым */
pointer-events: none; /* элемент невидим для событий мыши */
}

/* при отображении модального окно - именно здесь начинается магия */
.modalbackground:target {
    opacity: 1; /* делаем окно видимым */ 
    pointer-events: auto; /* элемент видим для событий мыши */
}

/* ширина диалогового окна и его отступы от экрана */
.modalwindow {
    width: 100%;
    max-width: 300px;
    margin: 10% auto;
    padding: 2%;
    background: #fff;
    border-radius: 3px;
}

/* настройка заголовка */
.modalwindow h3 {
padding: 0;
margin: 0;
}

/* оформление сообщение */
.modalwindow p {
padding: 0;
margin: 4% 0 8% 0;
}

/* вид кнопки ЗАКРЫТЬ */
.modalwindow a {
display: block;
color: #fff;
background: #369;
padding: 2%;
margin: 0 auto;
width: 50%;
border-radius: 3px;
text-align: center;
text-decoration: none;
}

/* вид кнопки ЗАКРЫТЬ при наведении на нее мыши */
.modalwindow a:hover {
background: #47a;
}

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

В обычном режиме модальное окно не отображается, так как прозрачно (за это отвечает CSS стиль opacity:0;) и не мешает просмотру страницы.

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

При нажатии кнопки ЗАКРЫТЬ мы переходим на родительскую страницу (адрес без хеш-тега и ID модального окна) и модальное окно опять станет невидимым.

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

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

С помощью данных атрибутов

Активируйте модальное окно без записи JavaScript. Набор на элемент контроллера, кнопки, вместе с или , чтобы предназначаться для определенного модальное окно для переключения.

Варианты

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

Имя	Тип	По умолчанию	Описание
backdrop	boolean or the string	true	Включает в себя модальное окно-фон элемента. Кроме того, укажите на фоне которого не закрыть модальное окно по щелчку.
keyboard	boolean	true	Замыкает модальное окно При нажатии клавиши Escape
show	boolean	true	Показывает модальное окно При инициализации.

Методы

Активирует ваш Контент в модальное окно. Принимает необязательный варианты .

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

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

Вручную скрывает модальное окно. Возвращает абоненту до модальное окно На самом деле был скрытым (т. е. события).

События

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

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

Example tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney’s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney’s organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven’t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

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

Вы также можете использовать сетку 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>

The Modal Plugin Classes

Class	Description
.modal	Creates a modal
.modal-content	Styles the modal properly with border, background-color, etc. Use this class to add the modal’s header, body, and footer.
.modal-header	Defines the style for the header of the modal
.modal-body	Defines the style for the body of the modal
.modal-footer	Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center
.modal-sm	Specifies a small modal
.modal-lg	Specifies a large modal
.fade	Adds an animation/transition effect which fades the modal in and out

Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds to the to override default scrolling behavior and generates a to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set on a controller element, like a button, along with a or to target a specific modal to toggle.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to , as in .

Name	Type	Default	Description
backdrop	boolean or the string	true	Includes a modal-backdrop element. Alternatively, specify for a backdrop which doesn’t close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed
focus	boolean	true	Puts the focus on the modal when initialized.
show	boolean	true	Shows the modal when initialized.

Methods

Activates your content as a modal. Accepts an optional options .

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the or event occurs).

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the event occurs).

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the event occurs).

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the ).

Event Type	Description
show.bs.modal	This event fires immediately when the instance method is called. If caused by a click, the clicked element is available as the property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the property of the event.
hide.bs.modal	This event is fired immediately when the instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

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

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

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

  Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

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

• Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом или другим элементом с . При необходимости выпадающие элементы можно запускать из элементов или .

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами :

Кнопка выпадающего списка

А вот так — с элементами:

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

Главная

Вторичная

Успех

Инфо

Предупреждение

Опасность

Выпадающие элементы кнопок с разделенными зонами

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

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг с обеих сторон выпадающей «каретки» и удаляет , добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

Главная

Toggle Dropdown

Вторичная

Toggle Dropdown

Успех

Toggle Dropdown

Инфо

Toggle Dropdown

Предупреждение

Toggle Dropdown

Опасность

Toggle Dropdown

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его и «преодолены»). В примере есть заголовок модального компонента, тело (требуется для ), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

«Живое» демо

Изменяйте (скрывайте\показывайте) рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.

Запустить модальное окно

Статический фон

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

Запустить статический фон модального окна

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

Запустить модальное окно

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

Запустить модальное окно

Вертикальное центрирование

Добавьте в чтобы вертикально центрировать модальное окно.

Вертикально центрированное модальное окно

Вертикально центрированное прокручиваемое модальное окно

Всплывающие подсказки и возникающие подсказки

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

Запустить модальное окно

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

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

Запустить модальное окно

Комбинируйте содержимое модальных элементов

Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте и атрибуты (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.

Ниже – пример демо с кодом HTML и JavaScript. Для информации по читайте инфо по .

Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap

Изменение анимации

Переменная определяет состояние преобразования перед анимацией постепенного появления, переменная определяет преобразование в конце модального появления анимация.

Если вы хотите, например, анимацию увеличения, вы можете установить .

Анимация при удалении

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

Динамическая высота

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

Доступность

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

Встраивание видео из YouTube

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

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

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса элемента родительского списка. Атрибут отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики () к непосредственным «детям» элемента . Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

still required

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

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к как в .

Название	Тип	По умолч.	Описание
offset	number | string | function	Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Смещение выпадающего элемента относительно его триггера. См. Popper.js
flip	boolean	true	Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: .
boundary	string | element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения , , или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к от Popper.js.
reference	string | element	‘toggle’	Reference element of the dropdown menu. Accepts the values of , , or an HTMLElement reference. For more information refer to Popper.js’s .
display	string	dynamic | static	По умолчанию мы используем Popper.js для динамического позиционирования. Для отключения используйте .
popperConfig	null | object	null	Чтобы изменить конфигурацию Popper.js по умолчанию в Bootstrap, смотрите

Обратите внимание, что если для установлено значение, отличное от , позиция применяется к контейнеру

Методы

Метод	Описание
	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
	Показывает выпадающее меню данной навигационной панели или вкладки.
	Скрывает выпадающее меню данной навигационной панели или вкладки.
	Обновляет позицию «выпадения» элемента.
	Уничтожает выпадающий элемент.

События

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

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

Options

There are certain options which can be passed to Bootstrap method to customize the functionality of a modal. Options can be passed via data attributes or JavaScript.

For setting the modals options via data attributes, just append the option name to , such as , , and so on.

Name	Type	Default Value	Description
backdrop	boolean or the string	true	Includes a modal-backdrop (black overlay area) element. Alternatively, you may specify for a backdrop which doesn’t close the modal on click.
keyboard	boolean	true	Closes the modal window on press of escape key.
focus	boolean	true	Puts the focus on the modal when initialized.
show	boolean	true	Shows the modal when initialized or activate.

Data attributes provides an easy way for setting the modal options, however JavaScript is the more preferable way as it prevents you from repetitive work. See the method in the section below to know how to set the options for modals using JavaScript.

In the following example we’ve set the option to (line no-5) which prevents the modal from closing when clicking outside of the modal i.e. the black overlay area.

How it works

Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.

• Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the so that modal content scrolls instead.
• Clicking on the modal “backdrop” will automatically close the modal.
• Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
• Modals use , which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a within another fixed element.
• Once again, due to , there are some caveats with using modals on mobile devices. for details.
• Due to how HTML5 defines its semantics, has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

The animation effect of this component is dependent on the media query. See the .

Keep reading for demos and usage guidelines.

Скрипт JavaScript для управления компонентом Modal

Нижеприведённый сценарий JavaScript не представляет собой ничего сложного – это обычная функция-конструктор. Её назначение создание и управление модальными окнами Bootstrap.

var ModalApp = {};
ModalApp.ModalProcess = function (parameters) {  
  this.id = parameters || 'modal';
  this.selector = parameters || '';
  this.title = parameters || 'Заголовок модального окна';
  this.body = parameters || 'Содержимое модального окна';
  this.footer = parameters || '<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>';   
  this.content = '<div id="'+this.id+'" class="modal fade" tabindex="-1" role="dialog">'+
    '<div class="modal-dialog" role="document">'+
      '<div class="modal-content">'+
        '<div class="modal-header">'+
          '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
          '<h4 class="modal-title">'+this.title+'</h4>'+
        '</div>'+
        '<div class="modal-body">'+this.body+'</div>'+
        '<div class="modal-footer">'+this.footer+'</div>'+
      '</div>'+
    '</div>'+
  '</div>';
  this.init = function() {
    if ($('#'+this.id).length==0) {
      $('body').prepend(this.content);
    }
    if (this.selector) {
      $(document).on('click',this.selector, $.proxy(this.showModal,this));
    }
  }
}
ModalApp.ModalProcess.prototype.changeTitle = function(content) {
  $('#' + this.id + ' .modal-title').html(content);
};
ModalApp.ModalProcess.prototype.changeBody = function(content) {
  $('#' + this.id + ' .modal-body').html(content);
};
ModalApp.ModalProcess.prototype.changeFooter = function(content) {
  $('#' + this.id + ' .modal-footer').html(content);
};
ModalApp.ModalProcess.prototype.showModal = function() {
  $('#' + this.id).modal('show');
};
ModalApp.ModalProcess.prototype.hideModal = function() {
  $('#' + this.id).modal('hide');
};  
ModalApp.ModalProcess.prototype.updateModal = function() {
  $('#' + this.id).modal('handleUpdate');
};

Чтобы не «засорять» глобальное пространство, создание объектов производится в рамках объекта .

Для более удобного подключения данного функционала можете воспользоваться следующими файлами:

• control-modal.js — не сжатая версия скрипта для динамического создания модальных окон Bootstrap 3;
• control-modal.min.js — сжатая (минимизированная) версия скрипта размером 1,49 КБ.
• control-modal-b4.js и control-modal-b4.min.js — для Bootstrap 4.

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

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

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

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

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

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

Методы

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

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

toggle

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

show

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

hide

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

handleUpdate

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

getInstance

Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM.

События

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

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

Modal Options

Options can be passed via data attributes or JavaScript. For data attributes,
append the option name to data-, as in data-backdrop=»».

Name	Type	Default	Description	Try it
backdrop	boolean or the string «static»	true	Specifies whether the modal should have a dark overlay: true — dark overlay false — no overlay (transparent) If you specify the value «static», it is not possible to close the modal when clicking outside of it	Using JS Using data
keyboard	boolean	true	Specifies whether the modal can be closed with the escape key (Esc): true — the modal can be closed with Esc false — the modal cannot be closed with Esc	Using JS Using data
show	boolean	true	Specifies whether to show the modal when initialized	Using JS Using data

Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds to the to override default scrolling behavior and generates a to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set on a controller element, like a button, along with a or to target a specific modal to toggle.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to , as in .

Name	Type	Default	Description
backdrop	boolean or the string	true	Includes a modal-backdrop element. Alternatively, specify for a backdrop which doesn’t close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed
focus	boolean	true	Puts the focus on the modal when initialized.
show	boolean	true	Shows the modal when initialized.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Activates your content as a modal. Accepts an optional options .

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the or event occurs).

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the event occurs).

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the event occurs).

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

Destroys an element’s modal.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the ).

Event Type	Description
show.bs.modal	This event fires immediately when the instance method is called. If caused by a click, the clicked element is available as the property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the property of the event.
hide.bs.modal	This event is fired immediately when the instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

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

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

• Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа , вместо него прокручивая модальные окна
• Клик вне модального элемента автоматически закрывает его.
• Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
• Модальные элементы имеют , что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .
• Опять же – из-за есть некоторые сложности при использовании их на мобильных устройствах. Смотри поддержки в браузерах.
• Из-за семантики HTML5 не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:

Далее – использование и примеры.