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

Используйте сетку 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>

Примеры

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

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

«Живое» демо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

Доступность

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

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

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

.modal(‘handleUpdate’)

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

Типичным примером этого сценария является показ скрытых элементов внутри модального окна с помощью JavaScript или загрузка содержимого внутри модального окна с помощью Ajax после активации.

<script>
$(document).ready(function(){
    $(".show-text").click(function(){
        $('#myModal').find(".lots-of-text").toggle();
        $('#myModal').modal('handleUpdate')
    });
});
</script>

Creating Modals with Bootstrap

Modal is basically a dialog box or popup window that is used to provide important information to the user or prompt user to take necessary actions before moving on. Modals are widely used to warn users for situations like session time out or to receive their final confirmation before going to perform any critical actions such as saving or deleting important data.

You can easily create very smart and flexible dialog boxes with the Bootstrap modal plugin. The following example oulines the basic structure to create a simple modal with a header, message body and the footer containing action buttons for the user.

Example

Try this code

— If you try out the above example, it will launches the modal window automatically when the DOM is fully loaded via JavaScript. The output will look something like this:

Tip: Always try to place your modal HTML in a top-level position in your document, preferably before closing of the tag (i.e. ) to avoid interference from other elements, otherwise it may affect modal’s appearance or functionality.

Check out the snippets section for examples of some beautifully designed Bootstrap modals.

Product Name

$49 $89

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

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

Events

Bootstrap’s modal class includes few events for hooking into modal functionality.

Event Description
show.bs.modal This event fires immediately when the show instance method is called.
shown.bs.modal This event is fired when the modal has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when fade out transition of the modal window has been fully completed.

Example

Try this code


Tip: See also the section for more examples on modals, like setting vertical alignment, changing default width, embedding video, etc.

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

Modal CSS Classes

For a tutorial about Modals, read our Bootstrap Modal Tutorial.

Class Description Example
Creates a modal Try it
Styles the modal properly with border, background-color, etc. Use this class to add the modal’s header, body, and footer Try it
Centers the modal vertically and horizontally within the page Try it
Adds a scrollbar inside the modal Try it
Defines the style for the header of the modal Try it
Defines the style for the body of the modal Try it
Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class Try it
Specifies a small modal Try it
Specifies a large modal Try it
Adds an animation/transition effect which fades the modal in and out Try it

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

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

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

Скрипт 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.

Большое и маленькое модальное окно

<p>
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-example-lg">
        Большое окно
    </button>
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-example-sm">
        Маленькое окно
    </button>
</p>
<!-- Большое окно -->
<div class="modal fade" id="modal-example-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Заголовок окна</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim
                    ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim
                    ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                </p>
            </div>
        </div>
    </div>
</div>
<!-- Маленькое окно -->
<div class="modal fade" id="modal-example-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Заголовок окна</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmodtempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>
</div>

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

Explanation of Code

To activate a Bootstrap modal via data attributes we basically need two components — the controller element like a button or link, and the modal element itself.

  • The outermost container of every modal in a document must have a unique id (in this case , line no-5), so that it can be targeted via (for buttons) or (for hyperlinks) attribute of the controller element (line no-2).
  • The attribute is required to add on the controller element (line no-2), like a button or an anchor, along with a attribute or to target a specific modal to toggle.
  • The class (line no-6) sets the width as well as horizontal and vertical alignment of the modal box. Whereas the class sets the styles like text and background color, borders, rounded corners etc.

Rest of the thing is self explanatory, such as the element defines a header for the modal that usually contains a modal title and a close button, whereas the element contains the actual content like text, images, forms etc. and the element defines the footer that typically contains action buttons for the user.

Note: The class on the element adds a fading and sliding animation effect while showing and hiding the modal window. If you want the modal that simply appear without any effect you can just remove this class. Also, when modals become too long for the user’s viewport or device, they scroll independent of the page itself.

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

Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или 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).
hidePrevented.bs.modal Это событие вызывается, когда отображается модальное изображение, его фон статичен , и выполняется щелчок за пределами модального режима или нажатие клавиши выхода.

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

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

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

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

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

В модальное окно плагин переключает ваш скрытый Контент по требованию, через атрибуты данных или 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 переходы для завершения).

С этим читают