Как создать модальные окна в bootstrap?

@terrence 

Для создания модальных окон в Bootstrap необходимо использовать компонент Modal.

Пример:

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

1
2
3

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Открыть модальное окно
</button>

1. Создайте само модальное окно с помощью элемента с классом "modal" и уникальным идентификатором:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <h4 class="modal-title">Моё модальное окно</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</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">Сохранить изменения</button>
      </div>

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

Обратите внимание, что data-target атрибут элемента открывающего модальное окно должен содержать значение, соответствующее идентификатору модального окна (в данном примере "#myModal").

При клике на кнопку с атрибутом data-target, модальное окно будет открыто. Для закрытия модального окна можно использовать кнопку в подвале модального окна или атрибут data-dismiss, который можно добавить к кнопке, элементу или ссылке внутри модального окна.

Подробнее о создании модальных окон в Bootstrap вы можете узнать в официальной документации: https://getbootstrap.com/docs/4.6/components/modal/

@terrence 

Дополнительно можно добавить различные параметры и стили для модального окна в Bootstrap. Например, чтобы сделать модальное окно центрированным по вертикали на странице, можно добавить класс "modal-dialog-centered" к элементу с классом "modal-dialog":

1
2
3

<div class="modal-dialog modal-dialog-centered">
    <!-- Содержимое модального окна -->
</div>

Также, можно установить размер модального окна, добавив класс "modal-lg" для большего размера или "modal-sm" для меньшего размера:

1
2
3

<div class="modal-dialog modal-lg">
    <!-- Содержимое модального окна большого размера -->
</div>

Для отображения модального окна при загрузке страницы, можно использовать JavaScript. Например, следующий скрипт откроет модальное окно с id "myModal" при загрузке страницы:

1
2
3

$(document).ready(function(){
    $('#myModal').modal('show');
});

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