Domanda Cambia il colore di sfondo in un modal bootstrap di Twitter?


Quando si crea una modal nel bootstrap di Twitter, c'è un modo per cambiare il colore di sfondo? Rimuovere completamente l'ombreggiatura?

NB: per rimuovere le ombre, questo non lo fa lavoro, perché cambia anche il comportamento dei clic. (Voglio ancora poter fare clic all'esterno del modal per chiuderlo.)

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

44
2018-05-14 14:50


origine


risposte:


Per cambiare il colore tramite:

CSS

Metti questi stili nel tuo foglio di stile dopo gli stili di bootstrap:

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

Di meno

Cambia le variabili bootstrap in:

@modal-backdrop-bg:           red;

fonte

insolenza

Cambia le variabili bootstrap in:

$modal-backdrop-bg:           red;

fonte

Bootstrap-Customizer

Modificare @modal-backdrop-bg al tuo colore desiderato:

getbootstrap.com/customize/


Puoi anche rimuovere lo sfondo tramite Javascript o impostando il colore su transparent.


81
2018-05-14 15:16



Se si desidera modificare il colore di sfondo dello sfondo per una modale specifica, è possibile accedere all'elemento sullo sfondo in questo modo:

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

Quindi è possibile modificare qualsiasi proprietà css tramite la funzione jquery di .css. In particolare, con lo sfondo:

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

Nota che $ ('# myModal') deve essere inizializzato, altrimenti $ backdrop sarà nullo. Lo stesso vale per l'elemento dati bs.modal.


8
2017-10-08 02:32



CSS

Se questo non funziona:

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

prova questo:

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

6
2017-11-06 22:10



rimuovi lo sfondo modale di bootstrap prova questo

.modal-backdrop {
   background: none;
}

4
2017-12-11 10:22



Diventa un po 'più complicato se vuoi aggiungere lo sfondo ad un modale specifico. Un modo per risolverlo è aggiungere e chiamare qualcosa come questa funzione invece di mostrare direttamente il modale:

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

Qualsiasi css può quindi essere applicato a background-backdrop classe.


2
2018-06-23 01:23



Aggiungi il seguente CSS;

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

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

2
2017-08-20 21:47



Se è necessario rimuovere l'ombreggiatura per un solo tipo di finestre modali, è sufficiente aggiungere un ID alla finestra modale

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

e nel tuo file css aggiungi quanto segue

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

Se è necessario rimuovere l'ombreggiatura per tutte le finestre modali, saltare il passaggio con l'assegnazione dell'ID.


1
2017-10-09 12:21