Динамическое изменение размера модала в Bootstrap

Быстрый ответ

Чтобы корректировать размер модального окна Bootstrap применительно к его содержимому, можно использовать CSS-стили, применённые к классу .modal-body. Можно также использовать jQuery, чтобы настроить свойства max-height и overflow-y после того, как модальное окно отобразится:

$('#yourModal').on('shown.bs.modal', function () {
  var доступнаяВысота = $(window).height() – $(this).find('.modal-header').outerHeight() – $(this).find('.modal-footer').outerHeight() – 20;
  $(this).find('.modal-body').css('max-height', доступнаяВысота).css('overflow-y', 'auto');
});

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

Применение CSS-стратегии для корректировки размеров

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

.modal-dialog {
  display: table;
  position: relative;
  width: auto;
  min-width: вашМинимальныйРазмер;
}

Если применяется обработчик jQuery-событий для скрытия модального окна, можно добавить некоторые настройки:

$('#yourModal').on('hidden.bs.modal', function () {
  // Здесь вы можете настроить модальное окно после его скрытия.
});

JavaScript – помощник CSS

Для динамического вычисления размеров пригодится JavaScript.

function resizeModal() {
  var modalDialog = $('.modal-dialog');
  modalDialog.css('max-height', 'calc(100vh – 100px)');
  modalDialog.find('.modal-content').css('overflow-y', 'auto');
}
// Вызов функции resizeModal() позволит динамически скорректировать размер модального окна.

Персонализация под разные устройства

Подробнее об этом расскажет наш спикер на видео

Разнообразие устройств

Модальное окно должно корректно отображаться на различных устройствах. Это можно обеспечить с помощью медиа-запросов:

@media (max-width: 768px) {
  .modal-dialog {
    width: 100%;
    max-width: none;
  }
}

Интерактивное содержимое: приоритеты важны!

Элементы, размеры которых могут меняться (формы, слайдеры), требуют особого внимания, чтобы избежать непредвиденных действий.

Визуализация

Модальное окно реагирует на вес содержимого, как йо-йо:

Лёгкое содержимое: [🪶<=>🪶] Тяжёлое содержимое: [📚<=>📚]

Плавное изменение размера: акушерство для пикселей

Добавьте плавность переходов для модального окна, чтобы обеспечить лучший визуальный опыт:

.modal-dialog {
  transition: width 0.3s ease-in-out;
}

UX – отвечайте ожиданиям пользователя!

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

Полезные материалы

1. Modal · Bootstrap — Инструкции Bootstrap по работе с модальными окнами.
2. .css() | jQuery API Documentation — Руководство по использованию jQuery для работы с CSS.
3. How to Create Modals with Bootstrap 5 – Tutorial Republic — Руководство по созданию модальных окон на Bootstrap 5.
4. java – How to implement environment-specific init parameters in my tomate application – Stack Overflow — Обсуждение на Stack Overflow, связанное с настройкой динамического контента.
5. EventTarget: addEventListener() method – Web APIs | MDN — Информация от MDN о методах обработки событий JavaScript.
6. Bootstrap 4 Modals — Учебник от W3Schools по созданию модальных окон Bootstrap 4.