Несколько методов отображения модального окна начальной загрузки: JavaScript и атрибуты данных

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

Метод 1: использование JavaScript/jQuery:

  1. Добавьте необходимые файлы Bootstrap CSS и JavaScript в свой HTML-документ.
  2. Создайте кнопку или элемент, который запускает модальное окно.
  3. Назначьте идентификатор модальному элементу.
  4. Напишите код JavaScript/jQuery для обработки события нажатия кнопки и отображения модального окна с использованием ее идентификатора.

Пример:

<!-- Include Bootstrap CSS and JavaScript files -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<!-- Button to trigger the modal -->
<button id="myModalBtn">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>
<!-- JavaScript/jQuery code to show the modal -->
<script>
  $(document).ready(function() {
    $('#myModalBtn').click(function() {
      $('#myModal').modal('show');
    });
  });
</script>

Метод 2. Использование атрибутов данных Bootstrap:

    1. Добавьте необходимые файлы Bootstrap CSS и JavaScript в свой HTML-документ.
    2. Создайте кнопку или элемент, который активирует модальное окно.
    3. Добавьте к кнопке атрибуты data-toggleи data-target, указав значение «modal» и идентификатор модального элемента соответственно.

Добавьте к кнопке атрибуты data-toggleи data-target.

Пример:

<!-- Include Bootstrap CSS and JavaScript files -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.min.js"></script>
<!-- Button to trigger the modal -->
<button data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>