Почему при переключении между modal’ами bootstrap с одного на другой задний фон становится все темнее?

При использовании Bootstrap модальные окна (modal'ы) имеют встроенное поведение, называемое модальной видимостью (modal backdrop). Этот эффект затемнения фона возникает, чтобы привлечь внимание пользователя к модальной области и создать эффект фокусировки.

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

В Bootstrap это действие управляется атрибутом data-backdrop. По умолчанию его значение установлено на true, что означает, что модальное окно затеняет задний фон. Если вы хотите отключить это поведение, можно установить значение атрибута data-backdrop в false.

<div class="modal"><!-- основное содержимое модального окна --></div>

<!-- кнопка, открывающая модальное окно -->
<button data-toggle="modal" data-target="#myModal">Открыть модальное окно</button>

<!-- скрипт для отключения затухания фона -->
<script>
    $(document).ready(function(){
        $('#myModal').modal({
            backdrop: false
        });
    });
</script>

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

.modal-backdrop {
    opacity: 0.5; // настройка прозрачности фона
}

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