Модальное окно · Bootstrap v5.1

Изменения модальное окно контента, основанного на кнопку пуска

Есть куча кнопок, вызывает модальное окно, просто с немного разным содержанием? Используйте event.relatedTarget и HTML data-* атрибуты (возможно через jQuery) варьировать содержимым модального окна в зависимости от того, какая кнопка была нажата. См подробные сведения в документации Модальных событий relatedTarget.

$('#exampleModal').on('show.bs.modal',function(event){varbutton=$(event.relatedTarget)// Кнопка, что спровоцировало модальное окноvarrecipient=button.data('whatever')// Извлечение информации из данных-* атрибутов// Если необходимо, вы могли бы начать здесь AJAX-запрос (и выполните обновление в обратного вызова).// Обновление модальное окно Контента. Мы будем использовать jQuery здесь, но вместо него можно использовать привязки данных библиотеки или других методов.varmodal=$(this)modal.find('.modal-title').text('New message to ' recipient)modal.find('.modal-body input').val(recipient)})

.modal(‘handleupdate’)

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

$('#myModal').modal('handleUpdate')

.modal(‘hide’)

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

$('#myModal').modal('hide')

.modal(options)

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

$('#myModal').modal({keyboard:false})

.modal(‘show’)

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

$('#myModal').modal('show')

.modal(‘toggle’)

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

$('#myModal').modal('toggle')

Accessibility

Be sure to add aria-labelledby=”…”, referencing the modal title, to .modal. Additionally, you may give a description of your modal dialog with aria-describedby on .modal. Note that you don’t need to add role=”dialog” since we already add it via JavaScript.

Animated login form

Simple Bootstrap login form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.1.2

Bootstrap 4 animated login form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Bootstrap version: 4.0.0

Bootstrap 4 login form

Bootstrap 4 login form with footer and social media icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.0.0

Bootstrap 4 login form #20

A cool login form template to be used for any website and app.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap 4 login page template

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Bootstrap version: 4.3.1

Bootstrap 4 login signup tabbed form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Bootstrap 5 fancy login form with social login support

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.1

Bootstrap 5 glowing login form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap 5 login form using neomorphism

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.0

Bootstrap 5 simple tabbed login register form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

Bootstrap version: 5.0.0

Bootstrap 5 validation login form using vue.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: boxicons.css, vue.js

Bootstrap version: 5.0.0

Bootstrap blue login

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css

Bootstrap version: 4.4.1

Bootstrap log in / sign up

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: unicons.css

Bootstrap version: 4.5.0

Bootstrap login

Bootstrap login form in card with social login buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.1.0

Bootstrap login and register

Bootstrap login and register material design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 3.3.7

Bootstrap login form #14

A neat and creative free sign in page template, which you can improve and edit further to meet your expectations to a tee.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form #19

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form #20

A modern and easy-to-use free login form with an animated button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form #7

Here is a free creative sign-in template design that you can utilize for heaps of different projects and intentions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form #8

An attention-grabbing free Bootstrap sign-in template design that guarantees full flexibility and mobile device compatibility.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form style #49

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

Bootstrap version: 3.3.7

Bootstrap login page

Bootstrap responsive login page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login screen with floating labels

A login screen for Bootstrap 4 with floating form labels, custom buttons, and social button options.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

Bootstrap login with overlay image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

Bootstrap version: 4.5.0

Bootstrap registration page with floating labels

A responsive Bootstrap 4 registration page with floating form labels and social sign up buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

Change animation

The $modal-fade-transform variable determines the transform state of .modal-dialog before the modal fade-in animation, the $modal-show-transform variable determines the transform of .modal-dialog at the end of the modal fade-in animation.

If you want for example a zoom-in animation, you can set $modal-fade-transform: scale(.8).

Dismiss

Dismissal can be achieved with the data attribute on a button within the modal as demonstrated below:

or on a button outside the modal using the data-bs-target as demonstrated below:

Dual design registration form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

Dynamic heights

If the height of a modal changes while it is open, you should call myModal.handleUpdate() to readjust the modal’s position in case a scrollbar appears.

Elegant login page

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Free bootstrap 4 login form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.4.1

Getinstance

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

Getorcreateinstance

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

How it works

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

Keep reading for demos and usage guidelines.

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Login form (using bootstrap)

Login form using Bootstrap 5.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 5.0.0

Login split page

A login split page using Bootstrap 4.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

Modal components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

Modern sign in page with split screen format

A Bootstrap 4 sign in page with a split screen format featuring an image and form fields.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

Optional sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Our default modal without modifier class constitutes the “medium” size modal.

Options

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

Registration

Registration form including a number of input fields with validation and some icons for signing up using a social media account.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Remove animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Launch static backdrop modal

Toggle between modals

Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes. For example, you could toggle a password reset modal from within an already open sign in modal. Please note multiple modals cannot be open at the same time—this method simply toggles between two separate modals.

Usage

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

Using the grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-bs-* attributes to vary the contents of the modal depending on which button was clicked.

Below is a live demo followed by example HTML and JavaScript. For more information, read the modal events docs for details on relatedTarget.

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Vertically centered modal

Vertically centered scrollable modal

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

Via javascript

Create a modal with a single line of JavaScript:

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

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

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

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

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

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

Если высота модального элемента изменяется при его открытии, вам следует вызвать $(‘#myModal’).modal(‘handleUpdate’) для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.

Доступность

Удостоверьтесь, что добавили в .modalrole=”dialog” и aria-labelledby=”…”, привязанные к названию модального элемента, и role=”document” в .modal-dialog.

Живая демонстрация

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

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

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

Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед анимацией постепенного появления, переменная $modal-show-transform определяет преобразование .modal-dialog в конце модального появления анимация.

Если вы хотите, например, анимацию увеличения, вы можете установить $modal-fade-transform: scale(.8).

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

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

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

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

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

$('#myModal').on('shown.bs.modal',function(){$('#myInput').trigger('focus')})

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

Как это устроено

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

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

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

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

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

Отклонение

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

или на кнопке за пределами modal с помощью data-bs-target, как показано ниже:

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Параметры

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

Подсказки в модальном окне

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

Полноэкранное модальное окно

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

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

Прокрутка длинного контента

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

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

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

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

Прокрутка длинного содержимого

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

Размещение разметки модального окна

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

С помощью блочной системы

Чтобы воспользоваться преимуществами Bootstrap блочная система в модальное окно, просто гнездо .container-fluid В .modal-body, а затем использовать обычные блочная система классов внутри этого контейнера.

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

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

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Центрование по вертикали

Добавьте .modal-dialog-centered к .modal-dialog для вертикального центрирования модального окна.

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

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

Через javascript

Вызов модальное окно с кодом myModal С одной строки JavaScript:

$('#myModal').modal(options)