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

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

Ууху, вы читаете этот текст в модальном режиме!

 
<дел> ...
<дел>

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

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

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Энейская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Энейская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Энейская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Энейская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Энейская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Энейская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

 

        
      
    
  
 

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

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

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.

 

        
      
    
  
 

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

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

Всплывающее окно в модальном окне

Эта кнопка вызывает всплывающее окно при нажатии.


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

Эта ссылка и та ссылка имеют всплывающие подсказки при наведении.

 <дел>
   
Всплывающее окно в модальном окне

Эта кнопка вызывает всплывающее окно при нажатии.

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

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

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

Используйте сетку Bootstrap внутри модального окна, вложив .container-fluid в .modal-body . Затем используйте обычные классы системы сетки, как и везде.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-auto

.col-md-2 .ml-auto

.col-md-6 .ml-auto

9 0337 Уровень 1: .col-sm-9

Уровень 2: .col-8 .col-sm-6

Уровень 2: .col-4 .col-sm-6

 <дел>
  <дел>
    <дел>
      
.col-md-4
.col-md-4 .ml-auto
<дел>
.col-md-3 .ml-auto
.col-md-2 .ml-auto
<дел>
.col-md-6 .ml-auto
<дел> <дел> Уровень 1: .col-sm-9 <дел> <дел> Уровень 2: .col-8 .col-sm-6 <дел> Уровень 2: .col-4 .col-sm-6

Различное модальное содержание

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

Ниже приведена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации ознакомьтесь с документацией по модальным событиям для получения подробной информации о relatedTarget .

Получатель:

Сообщение:

 



          <дел>
            
            <текстовое поле>
          
        
      
      <дел>
        
        
      
    
  
 
 $('#exampleModal'). on('show.bs.modal', функция (событие) {
  var button = $(event.relatedTarget) // Кнопка, активировавшая модальное окно
  var Receiver = button.data('whatever') // Извлечение информации из атрибутов data-*
  // При необходимости здесь можно инициировать AJAX-запрос (а затем выполнить обновление в обратном вызове).
  // Обновить содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
  переменная модальная = $(это)
  modal.find('.modal-title').text('Новое сообщение для ' + получателя)
  modal.find('.modal-body input').val(получатель)
}) 

Удалить анимацию

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

  

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

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

Доступность

Обязательно добавьте role="dialog" и aria-labelledby="..." , ссылаясь на заголовок модального окна, в .modal и role="document" в сам .modal-dialog . Кроме того, вы можете дать описание вашего модального диалога с aria-describedby на .modal .

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

Для встраивания видео YouTube в модальные окна требуется дополнительный JavaScript, не входящий в Bootstrap, для автоматической остановки воспроизведения и т. д. См. этот полезный пост о переполнении стека для получения дополнительной информации.

Дополнительные размеры

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

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

 


  




  
 

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

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

Через атрибуты данных

Активировать модальное окно без написания JavaScript. Установите data-toggle="modal" на элемент контроллера, например кнопку, вместе с data-target="#foo" или href="#foo" , чтобы указать конкретное модальное окно для переключения.

  

Через JavaScript

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

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

Опции

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

Имя Тип По умолчанию Описание
фон логическое значение или строка 'static' правда Включает элемент модального фона. В качестве альтернативы укажите static для фона, который не закрывает модальное окно при нажатии.
клавиатура логическое значение правда Закрывает модальное окно при нажатии клавиши выхода
фокус логическое значение правда При инициализации фокусируется на модальном окне.
показать логическое значение правда Показывает модальное окно при инициализации.

Методы

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

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

Дополнительные сведения см. в нашей документации по JavaScript.

.modal(варианты)

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

 $('#myModal').modal({
  клавиатура: ложь
}) 
.modal('переключатель')

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

 $('#myModal').modal('переключить') 
.modal('показать')

Вручную открывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно было показано (т. е. до того, как произойдет событие visible.bs.modal ).

 $('#myModal').modal('показать') 
. modal('скрыть')

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

 $('#myModal').modal('скрыть') 
.modal('handleUpdate')

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

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

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

События

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

).

Тип события Описание
шоу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *