Модальное окно Bootstrap

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

Для создания модального окна в Bootstrap мы можем использовать следующий код:

html

  Открыть модальное окно


  

    

      

        
Заголовок модального окна
        
          ×
        
      
      

        
Текст модального окна здесь...
      
      

        Закрыть
        Сохранить изменения
      
    
  

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

Чтобы модальное окно работало, мы должны подключить необходимые файлы Bootstrap и JavaScript:

html

Когда кнопка нажимается, Bootstrap автоматически добавляет класс "show" к модальному окну, чтобы его отобразить на экране. Когда пользователь закрывает модальное окно или нажимает на кнопки закрытия или сохранения, этот класс удаляется, и модальное окно исчезает.

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

Вот несколько примеров кода для таких вариантов настройки модального окна:

javascript
// Открытие модального окна программно
$("#myModal").modal("show");
// Закрытие модального окна программно
$("#myModal").modal("hide");
// Выполнение действия после закрытия модального окна
$("#myModal").on("hidden.bs.modal", function () {
  console.log("Модальное окно закрыто");
});
// Изменение размеров модального окна
...
...
// Изменение положения модального окна
...
...
...

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