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

Метод 1: запретить прокрутку основного текста
Один из способов предотвратить смещение фонового содержимого — отключить прокрутку основного текста, когда модальное окно открыто. Этого можно добиться, добавив следующий CSS:

body.modal-open {
  overflow: hidden;
  padding-right: 15px; /* Adjust this value to match your scrollbar width */
}

Чтобы включить прокрутку назад при закрытии модального окна, используйте JavaScript:

$('#myModal').on('hidden.bs.modal', function (e) {
  $('body').css('overflow', 'auto');
});

Метод 2: фиксированное позиционирование
Другой подход заключается в применении фиксированного позиционирования к фоновому содержимому. Это гарантирует, что контент останется на месте независимо от видимости модального окна. Добавьте следующий CSS:

.modal-open .fixed-content {
  position: fixed;
  width: 100%;
}

И примените класс fixed-contentк родительскому контейнеру фонового содержимого:

<div class="fixed-content">
  <!-- Background content goes here -->
</div>

Метод 3: настройка полей
Вы также можете решить проблему смещения, отрегулировав поля фонового содержимого при открытии модального окна. Используйте следующий код JavaScript:

$('#myModal').on('shown.bs.modal', function (e) {
  $('.background-content').css('margin-right', getScrollbarWidth());
});
function getScrollbarWidth() {
  var scrollDiv = document.createElement('div');
  scrollDiv.className = 'modal-scrollbar-measure';
  document.body.appendChild(scrollDiv);
  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);
  return scrollbarWidth;
}

Обязательно добавьте следующий CSS, чтобы скрыть полосу прокрутки:

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

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