Bootstrap 4 Модальный без фона

Question

Я пытаюсь отобразить модальное окно Bootstrap 4, но без фона.

Для этого я безуспешно пробую это:

.modal.right. modal-backdrop.show {
   background-color: transparent !important;
}

Если я попробую это работает (но не применяется только к «правильным» классам):

modal-backdrop.show {
   background-color: red;
}

Вот пример для тестирования: https://codepen.io/cdemez/pen/abdmxXZ

Если у кого-то есть идея решить проблему?

Answer 1

Изменение фона определенного модального окна не может быть стилизовано с помощью простого CSS. Bootstrap не определяет такую ​​вещь.

С помощью CSS вы можете изменить стиль фона глобально (применимо ко всем модальным фонам).

Элемент модального фона находится за пределами класса modal. Таким образом, вы можете настроить таргетинг на элемент с помощью jquery.

$('#exampleModal').on('show.bs.modal', function (e) {
//parent element of backdrop is `body`
    $('body').addClass("example-open");
}).on('hide.bs.modal', function (e) {
    $('body').removeClass("example-open");
})

, тогда вы можете использовать css

.example-open .modal-backdrop {background-color:red !important;}

Рабочий пример: https://www.codeply.com/p/WBAMNC7G5m

Answer 2

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

 <div class="modal right fade" data-backdrop="hidden" id="exampleModal" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Атрибут data-drop является логическим значением, поэтому измените его на false, и он должен удалить фон.

Вот так:

<div class="modal right fade" data-backdrop="false" id="exampleModal" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">