ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap 4 Modal - модальное окно


Загрузочный 4 модальный

Модальным компонентом является диалоговое окно/всплывающее окошко, которое отображается поверх текущей страницы:


Как создать модальный

В следующем примере показано, как создать базовый модальный:

Пример

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Добавить анимацию

Используйте .fade класс для добавления эффекта затухания при открытии и закрытии модального:

Пример

<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>

Модальный размер

Измените размер модального, добавив .modal-sm класс для малых модальностей или .modal-lg класса для больших модальностей.

Добавьте класс Size к элементу <div> с классом .modal-dialog:

Small Modal

<div class="modal-dialog modal-sm">

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

<div class="modal-dialog modal-lg">

По умолчанию модальные размеры являются средними.


Центрированный модальный

Центрировать модальные вертикально и горизонтально в пределах страницы, с .modal-dialog-centered классом:

Пример

<div class="modal-dialog modal-dialog-centered">

Bootstrap Модальный справочник

Для полной ссылки на все модальные варианты, методы и события, перейдите на наш Bootstrap JS Модальный справочник.