Manca lo sfondo modale Bootstrap 3

Question

Il modal Bootstrap 3 normalmente rende la pagina più scura per evidenziare la modale stessa e per indicare che l'interfaccia utente della pagina è disabilitata mentre è visualizzata la modale.

Ad un certo punto durante la mia codifica (alcune settimane fa), lo sfondo ha smesso di mostrare. Tutto il resto funziona bene, inclusa la chiusura della modale facendo clic su di essa o facendo clic sulla X nell'angolo in alto a destra. Anche l'interfaccia utente della pagina è disabilitata fino a quando la modale non viene chiusa, il che va bene. Poiché sono migliaia di righe di codice, non le incollerò qui.

Non riesco a capire perché il mio background modale sia mancante. Ho convalidato il mio codice HTML per assicurarmi che non ci siano tag mancanti. Sto anche utilizzando i datatables, tabdrop e d3 sulla mia pagina, ma ho provato a rimuovere questi (JS e CSS) uno per uno per risolvere il problema senza alcun risultato. Cos'altro dovrei controllare?

Ecco la pagina: http://suite.swiftdigital.com.au/scripts/marcus/modal/event.htm

Fare clic sul pulsante verde "nuovo partecipante" per vedere una delle modali. Un altro è il pulsante Modifica vista nel mezzo dello schermo.

Answer 1

Non è stato un problema di CSS o HTML, dopo tutto. Ottenere l'ultimo file Bootstrap JS risolto. Ero su 3.2.0 e aggiornato alla 3.3.1. Huh. (Devi assicurarti che le versioni di Bootstrap JS e CSS corrispondano.)

Answer 2

aggiungere questo alla tua CSS:

.modal-backdrop, .modal-backdrop.fade.in { 
opacity: 0.7; 
filter: alpha(opacity=70); 
background: #fff; 
} 

se sono solo utilizzando magazzino bootstrap CSS. questo renderà il backgroun bianco con un'opacità del 70%.

o

Aggiungi questo alla tua CSS:

.fade.in { 
opacity: .75; 
background-color: #000; 
} 

Questo è perché in questo momento, la classe .fade.in è non ha colore di sfondo allegato.

Answer 3

Confrontando il codice per il sito OOTB Bootstrap il codice simile a questo:

<div class="modal-dialog" style="width: 600px"> 
     <div class="modal-content"> 
      <div class="modal-header">... 
       rest of the module 

Il bootstrap ha il codice in questo modo:

<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; padding-right: 17px;"> 
    <div class="modal-backdrop fade in" style="height: 995px;"></div> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

sembra che ti stai perdendo questa linea di seguito. Prova ad aggiungere che sotto la vostra modal-dialog DIV

<div class="modal-backdrop fade in" style="height: 995px;"></div>