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

Пользователь

от quinton.prosacco , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jedidiah.brown , год назад

@quinton.prosacco 

Bootstrap предоставляет возможность создавать модальные окна с помощью встроенного компонента modal.


Для создания модального окна в bootstrap необходимо выполнить следующие шаги:

  1. Создать кнопку или ссылку, которая будет вызывать модальное окно. Добавьте атрибут data-toggle="modal" и data-target="#myModal" в элемент, который будет вызывать модальное окно. Например:
1
2
3
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Открыть модальное окно
</button>


  1. Создать само модальное окно с помощью элемента <div>, в котором будут расположены все необходимые элементы. Добавьте атрибут id="myModal" к этому элементу, чтобы сделать его доступным для вызова из кнопки или ссылки. Например:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Заголовок модального окна</h5>
        <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>


  1. Настройте содержимое модального окна, добавив заголовок, текст и кнопки. Обычно заголовок добавляется в элемент <h5> внутри блока <div class="modal-header">. Текст добавляется в элемент <p> внутри блока <div class="modal-body">. Кнопки добавляются в блок <div class="modal-footer">.
  2. Добавьте скрипт jQuery и плагин bootstrap.js, чтобы обеспечить работу модального окна. Это можно сделать внутри элемента <head> страницы:
1
2
3
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


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