Ho usato il codice per il mio modale direttamente dall'esempio di Bootstrap, e ho incluso solo il bootstrap.js (e non il bootstrap-modal.js). Tuttavia, il mio modale appare sotto la dissolvenza grigia (sfondo) e non è modificabile.
Ecco come appare:
Vedi [questo fiddle][2] per un modo di riprodurre questo problema. La struttura di base di quel codice è come questa:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Qualche idea sul perché o su cosa posso fare per risolvere il problema?
Se il contenitore modale ha una posizione fissa o relativa o è all'interno di un elemento con posizione fissa o relativa questo comportamento si verificherà.
**Assicuratevi che il contenitore modale e tutti i suoi elementi genitori siano posizionati nel modo predefinito per risolvere il problema.
Ecco un paio di modi per farlo:
</body>
.position:
dal modal e dai suoi antenati finché il problema non sparisce. Questo potrebbe cambiare l'aspetto e il funzionamento della pagina, tuttavia.Il problema ha a che fare con il posizionamento dei contenitori genitori. Puoi facilmente "spostare" il tuo modal fuori da questi contenitori prima di visualizzarlo. Ecco come farlo se state `mostrando il vostro modal usando js:
$('#myModal').appendTo("body").modal('show');
Oppure, se lanciate il modal usando i pulsanti, lasciate perdere il .modal('show');
e fate semplicemente:
$('#myModal').appendTo("body")
Questo manterrà tutte le normali funzionalità, permettendoti di mostrare la modale usando un pulsante.