Как создать модальное окно в Bootstrap 5?

<

div itemprop=»articleBody»>

Bootstrap 5 Modal — это в основном всплывающее окно, отображаемое при нажатии на такой элемент, как кнопка или текстовая ссылка. Он использует JavaScript для отображения содержимого при нажатии с эффектом лайтбокса. Модальное всплывающее окно можно закрыть, нажав кнопку закрытия или щелкнув за пределами модального окна. Модальный также упоминается со многими другими именами, такими как всплывающее окно, диалоговое окно или предупреждение. Обратите внимание, что это всплывающее предупреждение отличается от исходного компонента предупреждений Bootstrap.

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

Модальное руководство Bootstrap 5

В этом руководстве рассматриваются следующие темы:

  1. Модальный режим срабатывает при нажатии кнопки
  2. Прокрутка содержимого внутри модального окна
  3. Размеры модалов
  4. Модальное окно с всплывающей подсказкой и всплывающим окном
  5. Использование макета сетки внутри модального содержимого
  6. Настройка модального компонента

1. Создание простого модального окна, запускаемого по нажатию кнопки

Модальное окно Bootstrap содержит два компонента — кнопку и модальное окно. Ниже приведен код кнопки для модального окна:

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Modal1">
Click to launch modal
</button>

Как видите, это не что иное, как компонент кнопки с дополнительными атрибутами:

  • Атрибут data-toggle = «модальный» используется для идентификации кнопки как модального компонента.
  • Далее идет data-target = ”# Modal1 ″ который должен быть уникальным. Этот же идентификатор необходимо использовать в модальном компоненте.

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

<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Here goes the content of the modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Save</button>
</div>
</div>
</div>
</div>

В модальном компоненте используется несколько классов CSS:

  • Внешняя оболочка div должна иметь CSS-класс «.modal». Дополнительный класс «.fade» используется для затухания модального окна, что является необязательным.
  • Идентификатор должен совпадать со значением идентификатора, установленным для компонента кнопки.
  • Не забудьте добавить другие атрибуты, такие как tabindex, role и aria-hidden.
  • Модальное содержимое должно быть добавлено в теги , идентифицированные классом «.modal-dialog».
  • Модальное окно имеет структуру панели или карточки, имеющую классы содержимого, верхнего колонтитула, заголовка, тела и нижнего колонтитула.
  • Все части модального окна должны быть заключены в с классом «.modal-content».
  • Раздел заголовка идентифицируется с классом «.modal-header» и состоит из двух компонентов — заголовка и кнопки. Компонент заголовка использует «.modal-title» и используется для добавления заголовка к модальному всплывающему окну. Компоненты кнопки используются для включения значка закрытия (X), чтобы закрыть модальное диалоговое окно.
  • Модальное тело использует класс «.modal-body» и содержит тело модального окна, которое может быть любыми элементами, такими как текст, кнопка, всплывающая подсказка или всплывающее окно.
  • Раздел нижнего колонтитула использует «.modal-footer» и содержит две кнопки — одну для закрытия, а другую для сохранения. Кнопка закрытия фактически закроет модальное всплывающее окно. Но кнопка сохранения — это фиктивная кнопка, и вы должны добавить свой собственный код для сохранения документов на сервере.

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

Bootstrap 4 Modal
Bootstrap Modal

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

2. Создание модального окна с прокручивающимся содержимым

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

<button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#Modal2">
  Open modal
</button>
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="Modal2" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Modal with Scrolling Content</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Here is the content for modal, enter lengthy content so that you can see the scrolling effect.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-info btn-md">Save</button>
      </div>
    </div>
  </div>
</div>

Модальное окно прокрутки будет выглядеть, как показано ниже:

Прокручиваемый модальный контент
Прокручиваемый модальный контент

3. Размеры модалов

Размер здесь указывает ширину модального окна. Вы можете увеличить или уменьшить размер, добавив класс «.modal-lg» или «.modal-sm» к классу «.modal-dialog».

Полный код большего модального окна приведен ниже:

<button class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button>
<div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="LargeModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Large Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Here goes the content of large modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Save</button>
</div>
</div>
</div>
</div>

Точно так же полный код для меньшего модального окна выглядит следующим образом:

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".example-modal-sm">Small modal</button>
<div class="modal fade example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="SmallModal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Small Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Here goes the content of small modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>

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

Большой модальный
Большой модальный
Модальное окно по умолчанию
Модальное окно по умолчанию
Меньший модальный
Меньший модальный

4. Модальное окно с всплывающей подсказкой и всплывающим окном

Также можно вставлять всплывающие подсказки и всплывающие окна внутри модального содержимого. Ниже приведен код для этого:

<!-- Button trigger for modal -->
<button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modaltooltip">
  Modal with Popover and Tooltip
</button>
<!-- Modal -->
<div class="modal fade" id="Modaltooltip" tabindex="-1" role="dialog" aria-labelledby="Modaltooltip" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
<div class="modal-body">
  <h5>Popover in Modal</h5>
  <p>Click button for popover. <a href="https://www.webnots.com/bootstrap-modal-tutorial/#" role="button" class="btn btn-dark" title="Popover Title" data-content="Enter content to be shown inside popover" data-toggle="popover">button</a></p>
  <hr>
  <h5>Tooltip in Modal</h5>
  <p>Hover over <a href="https://www.webnots.com/bootstrap-modal-tutorial/#" title="Tooltip on Top" data-toggle="tooltip">this hyperlink</a> to see a tooltip.</p>
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning btn-md">Save</button>
      </div>
    </div>
  </div>
</div>

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

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

Примечание: Помните, что для всплывающей подсказки и всплывающего окна требуется дополнительный JavaScript Popper вместе с файлами сценария Bootstrap. Узнайте больше о всплывающих подсказках Bootstrap и всплывающих компонентах Bootstrap.

5. Вставка макета сетки в модальное содержимое

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

<button type="button" class="btn btn-dark btn-md" data-toggle="modal" data-target="#Modalgrid">
  Modal with Grid
</button>
<div class="modal fade" id="Modalgrid" tabindex="-1" role="dialog" aria-labelledby="Modalgrid" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
<div class="modal-body">
  <div class="container-fluid">
    <div class="gridmodal">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
        </div>
  </div>
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning btn-md">Save</button>
      </div>
</div>
</div>
</div>

В браузере это должно выглядеть так:

Модальное окно с содержимым макета сетки
Модальное окно с содержимым макета сетки

6. Настройка модального компонента Bootstrap

Как видите, последняя версия Bootstrap позволяет добавлять любой тип содержимого в модальное всплывающее окно. Вы можете настроить цвет, границы и внешний вид каждого элемента в модальном окне с помощью дополнительных дополнительных CSS по своему усмотрению. Например, в приведенном выше примере сетки мы использовали собственный класс CSS «.gridmodal», чтобы добавить фон, границу и интервал, как показано ниже.

<style>
.gridmodal .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-bottom: .75em;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
</style>

Вы также можете добавить класс CSS к классам Bootstrap по умолчанию. Например, если вы хотите добавить эффект тени к модальным кнопкам, вы можете просто добавить класс «btn-md», как показано ниже.

<!-- Button trigger for modal -->
<button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modal1">
  Click to launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Here goes the content of the modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning btn-md">Save</button>
      </div>
    </div>
  </div>
</div>

Мы добавили собственный класс «btn-md» к трем компонентам кнопок, и результат будет показан в браузере, как показано ниже:

Кнопки с эффектом тени
Кнопки с эффектом тени

Пользовательский CSS для класса «btn-md» приведен ниже, который может быть добавлен внутри части заголовка HTML-страницы в тегах

. Или вы можете добавить код во внешний файл CSS (возможно, в style.css вашей темы) и связать CSS в заголовке.

.btn-md {
    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    cursor: pointer;
}

Заключение

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


Изучите Bootstrap 5 (Индекс)


    </div>

Похожие записи

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

Ваш адрес email не будет опубликован.