Измените цвет фона в модуле twitter bootstrap?

При создании модального в twitter bootstrap, есть ли способ изменить цвет фона? Полностью удалить затенение?

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

$("#myModal").modal({
  backdrop: false
});

Ответ 1

Чтобы изменить цвет с помощью:

CSS

Поместите эти стили в таблицу стилей после стилей начальной загрузки:

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

Меньше

Изменяет загрузочные переменные на:

@modal-backdrop-bg:           red;

Источник

Sass

Изменяет загрузочные переменные на:

$modal-backdrop-bg:           red;

Источник

Bootstrap-настройщик

Измените @modal-backdrop-bg на нужный цвет:

getbootstrap.com/customize/

Вы также можете удалить фоновый рисунок с помощью Javascript или установив цвет в transparent.

Ответ 2

Если вы хотите изменить фоновый цвет фона для определенного модального, вы можете получить доступ к элементу фона таким образом:

$('#myModal').data('bs.modal').$backdrop

Затем вы можете изменить любое свойство css с помощью функции .css jquery. В частности, с фоном:

$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')

Обратите внимание, что $('# myModal') должен быть инициализирован, иначе $backdrop будет null. То же самое относится к элементу данных bs.modal.

Ответ 3

CSS

Если это не работает:

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

попробуйте следующее:

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

Ответ 4

удалить загрузочный модальный фон. Попробуйте этот

.modal-backdrop {
   background: none;
}

Ответ 5

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

function showModal(selector) {
    $(selector).modal('show');
    $('.modal-backdrop').addClass('background-backdrop');
}

Любой css может быть применен к классу background-backdrop.

Ответ 6

Добавьте следующий CSS:

.modal .modal-dialog .modal-content{  background-color: #d4c484; }

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...

Ответ 7

Если вам нужно удалить затенение только для одного типа модальных окон, вы можете просто добавить идентификатор в свое модальное окно

<div class="modal fade" id="myModal">...</div>

а в файле css добавьте следующие

#myModal .modal-backdrop {background-color: transparent;}

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

Ответ 8

Я пару часов пытался понять, как убрать фон из запущенного модала, пока пробовал

.modal-backdrop {    background: none; }

Не сработало, даже я пытался работать с JavaScript, как

 <script type="text/javascript">   
 $('#modal-id').on('shown.bs.modal',  function () {
       $(".modal-backdrop.in").hide();     })
</script>

Также не работал. Я только добавил

data-backdrop="false"

<div class="modal fade" id="myModal" data-backdrop="false">......</div>

И Применяя CSS Класс

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

Теперь это работает как шарм Это работало с Bootstrap 3

Ответ 9

Для Bootstrap 4 вам, возможно, придется использовать .modal-backdrop.show и поиграть с флагом !important .modal-backdrop.show на background-color и opacity.

Например

.modal-backdrop.show {
   background-color: #f00;
   opacity: 0.75;
}