Ik heb de code voor mijn modal rechtstreeks uit het Bootstrap voorbeeld gebruikt, en heb alleen de bootstrap.js (en niet bootstrap-modal.js) toegevoegd. Mijn modal verschijnt echter onder de grijze fade (backdrop) en is niet bewerkbaar.
Hier's hoe het eruit ziet:
Zie [deze fiddle][2] voor één manier om dit probleem te reproduceren. De basisstructuur van die code is als volgt:
<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;
}
Enig idee hoe dit komt of wat ik kan doen om dit te verhelpen?
Als de modale container een vaste of relatieve positie heeft of zich binnen een element met vaste of relatieve positie bevindt, zal dit gedrag zich voordoen.
Zorg ervoor dat de modale container en al zijn parent elementen op de standaard manier gepositioneerd zijn om het probleem op te lossen.
Hier zijn een paar manieren om dit te doen:
</body>
.position:
CSS eigenschappen van de modal en zijn voorouders verwijderen totdat het probleem verdwijnt. Dit kan echter het uiterlijk en de werking van de pagina veranderen.Het probleem heeft te maken met de positionering van de bovenliggende containers. Je kunt je modal makkelijk "move" uit deze containers halen voordat je het laat zien. Hier's hoe je het moet doen als je je modal zou tonen
met behulp van js:
$('#myModal').appendTo("body").modal('show');
Of, als je modal lanceert met behulp van knoppen, laat dan de .modal('show');
vallen en doe gewoon:
$('#myModal').appendTo("body")
Dit zal alle normale functionaliteit behouden, zodat je de modal kunt tonen met behulp van een knop.