J'ai utilisé le code pour ma modale directement à partir de l'exemple Bootstrap, et j'ai inclus uniquement le fichier bootstrap.js (et non bootstrap-modal.js). Cependant, ma modale apparaît sous le fondu gris (toile de fond) et n'est pas modifiable.
Voici à quoi elle ressemble :
![modal cachée derrière la toile de fond][1]
Voir [ce code][2] pour une façon de reproduire ce problème. La structure de base de ce code est la suivante :
<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;
}
Une idée de la raison de ce phénomène ou de ce que je peux faire pour y remédier ?
[1] : http://i.stack.imgur.com/qSypO.png [2] :
Ce comportement se produira si le conteneur modal a une position fixe ou relative ou s'il se trouve dans un élément ayant une position fixe ou relative.
**Pour résoudre le problème, assurez-vous que le conteneur modal et tous ses éléments parents sont positionnés par défaut.
Voici quelques façons de le faire :
</body>
.position:
de la modale et de ses ancêtres jusqu'à ce que le problème disparaisse. Cela risque toutefois de modifier l'aspect et le fonctionnement de la page.Le problème est lié au positionnement des conteneurs parents. Vous pouvez facilement "déplacer" votre modale hors de ces conteneurs avant de l'afficher. Voici comment procéder si vous "montrez" votre modale en utilisant des js :
$('#myModal').appendTo("body").modal('show');
Ou, si vous lancez la modale en utilisant des boutons, laissez tomber le .modal('show' ;);
et faites-le simplement :
$('#myModal').appendTo("body")
Cela conservera toutes les fonctionnalités normales et vous permettra d'afficher la modale à l'aide d'un bouton.