Jeg har brukt koden for min modal rett fra Bootstrap-eksemplet, og har bare inkludert bootstrap.js (og ikke bootstrap-modal.js). Min modal vises imidlertid under den grå fade (bakgrunn) og kan ikke redigeres.
Her er hvordan det ser ut:
Se [this fiddle][2] for en måte å reprodusere dette problemet på. Den grunnleggende strukturen i den koden er slik:
<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;
}
Noen ideer om hvorfor dette er eller hva jeg kan gjøre for å fikse dette?
Hvis modalcontaineren har en fast eller relativ posisjon eller er innenfor et element med fast eller relativ posisjon, vil denne oppførselen forekomme.
**Forsikre deg om at modalcontaineren og alle dens overordnede elementer er plassert på standard måte for å løse problemet.
Her er et par måter å gjøre dette på:
</body>
.position:
CSS-egenskaper fra modalen og dens forfedre til problemet forsvinner. Dette kan imidlertid endre hvordan siden ser ut og fungerer.Problemet har å gjøre med plasseringen av de overordnede containerne. Du kan enkelt "flytte" modalen din ut fra disse containerne før du viser den. Slik gjør du det hvis du "viser" modalen din ved hjelp av js:
$('#myModal').appendTo("body").modal('show');
Eller, hvis du starter modal ved hjelp av knapper, slipp .modal('show');
og bare gjør det:
$('#myModal').appendTo("body")
Dette vil beholde all normal funksjonalitet, slik at du kan vise modalen ved hjelp av en knapp.