8 Domanda: Cambia il colore di sfondo in un modal di avvio di twitter?

domanda creata a Mon, May 14, 2012 12:00 AM

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 l'ombreggiatura, questo non funziona, perché cambia anche il comportamento del clic. (Voglio comunque poter fare clic all'esterno del modal per chiuderlo.)

 
$("#myModal").modal({
  backdrop: false
});
    
49
  1. Nota, dal punto di vista dell'usabilità, mantenere il clic per respingere il comportamento senza alcun feedback visivo (ad esempio rimuovere completamente l'ombreggiatura) è un'esperienza piuttosto scadente. Non c'è nulla che indichi all'utente che il loro clic in background è "sicuro" e non passerà al controllo sottostante. Inoltre, non c'è nulla che indichi all'utente che può fare clic in background per chiudere la modale in primo luogo.
    2016-01-05 20: 05: 20Z
8 risposte                              8                         

Per cambiare il colore tramite:

CSS

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

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

Meno

Cambia le variabili bootstrap in:

 
@modal-backdrop-bg:           red;

Origine

Sass

Cambia le variabili bootstrap in:

 
$modal-backdrop-bg:           red;

Origine

Bootstrap-Customizer

Cambia @modal-backdrop-bg nel colore desiderato:

getbootstrap.com/customize/


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

    
91
2014-11-16 14: 56: 57Z
  1. Quindi funziona solo se sto usando MENO, giusto ...?
    2012-05-14 20: 21: 34Z
  2. no dovrebbe funzionare anche con sass o con nessuno di essi. basta essere sicuro di aver messo queste righe dopo il bootstrap.css. Hai provato ???
    2012-05-14 21: 54: 30Z
  3. Ho provato ma ho fatto un errore la prima volta. Grazie per avermi sistemato.
    2012-05-18 13: 23: 30Z
  4. Devi solo includere il file bootstrap.css prima del tuo file css e sovrascrivere le classi richieste per applicare il tema al modal nel modo desiderato. Questo è il punto cruciale del CSS ... il suo collegamento a cascata.
    2012-11-28 21: 58: 39Z
  5. Per scoprire quale classe di bootstrap modificare, puoi aprire Inspect Element. Sono nuovo nel bootstrap e non ho trovato una buona risorsa per scoprire tutti i dettagli sulle classi di bootstrap e dove sono usate.
    2013-06-18 21: 13: 32Z

Se vuoi cambiare il colore di sfondo dello sfondo per una modale specifica, puoi accedere all'elemento sullo sfondo in questo modo:

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

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

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

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

    
9
2014-10-08 02: 32: 06Z
  1. Funziona perfettamenteper il targeting di un modal specifico. E sembra che l'inizializzazione avvenga abbastanza rapidamente da far funzionare questa linea direttamente dopo $('#myModal').modal(); (in caso contrario, questo dovrebbe essere racchiuso in un listener di eventi per l'evento "mostrato" di # myModal). Nota che invece di mettere gli stili CSS direttamente in javascript, puoi usare $('#myModal').data('bs.modal').$backdrop.addClass('myModal-backdrop'); come @ Simon-Bengtsson nella sua risposta.
    2016-01-05 20: 02: 50Z

CSS

Se non funziona:

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

prova questo:

 
.modal { 
   background-color: red !important; 
}
    
6
2015-11-06 22: 10: 40Z
  1. Nel mio caso l'! importante ha risolto il problema. Grazie.
    2015-11-12 21: 11: 26Z

rimuovi lo sfondo modale di bootstrap prova questo

 
.modal-backdrop {
   background: none;
}
    
5
2015-12-11 10: 22: 57Z

Diventa un po 'più complicato se vuoi aggiungere lo sfondo ad una specifica modal. 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 alla classe background-backdrop.

    
3
2014-06-23 01: 23: 33Z

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
2016-08-21 03: 26: 25Z
  1. ho provato tutte le altre risposte questo è l'unico che ha funzionato per qualche motivo ..
    2016-10-08 07: 37: 52Z

Se devi rimuovere l'ombreggiatura per un solo tipo di finestre modali, puoi semplicemente aggiungere un ID alla tua finestra modale

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

e nel tuo file css aggiungi il seguente

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

Se devi rimuovere l'ombreggiatura per tutte le finestre modali, salta il passaggio con l'assegnazione dell'ID.

    
1
2015-10-09 12: 21: 07Z
  1. Ho provato prima questo e non funziona affatto. Sembra che bootstrap collochi l'elemento .modal-backdrop in una posizione completamente separata nel DOM, non nidificata all'interno dell'elemento #myModal. Quindi id #myModal non ha nulla a che fare con il .modal-backdrop e lo stile CSS viene ignorato.
    2016-01-05 19: 49: 46Z

Ho usato un paio d'ore per cercare di capire come rimuovere lo sfondo dal modale lanciato, finora provato

 
.modal-backdrop {    background: none; }

Non ha funzionato anche io ho provato a lavorare con javascript come

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

Inoltre non ha funzionato neanche. Ho appena aggiunto

 
data-backdrop="false"

a

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

E l'applicazione della classe css

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

Ora funziona come un fascino Questo ha funzionato con Bootstrap 3

    
0
2019-04-08 09: 58: 51Z
fonte posta Qui