Eu usei o código do meu modal diretamente do exemplo Bootstrap, e incluí apenas o bootstrap.js (e não bootstrap-modal.js). No entanto, o meu modal está a aparecer por baixo do desbotamento cinzento (cenário) e não é editável.
Aqui'é o que parece:
Veja [este violino][2] para uma forma de reproduzir este problema. A estrutura básica desse código é assim:
<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;
}
Alguma ideia do porquê disto ou do que posso fazer para resolver isto?
Se o contentor modal tiver uma posição fixa ou relativa ou se estiver dentro de um elemento com posição fixa ou relativa, este comportamento ocorrerá.
Certifique-se de que o contentor modal e todos os seus elementos de origem estão posicionados como padrão para resolver o problema.
Aqui estão algumas maneiras de fazer isto:
</body>
.position:
CSS properties from the modal and its ancestors until the problem goes away. Isto pode mudar a aparência e funções da página, no entanto.O problema tem a ver com o posicionamento dos contentores-mãe. Você pode facilmente "move" seu modal para fora destes recipientes antes de exibi-lo. Aqui's como fazê-lo se você estivesse 'exibindo' o seu modal utilizando js:
$('#myModal').appendTo("body").modal('show');
Ou, se você lançar o modal utilizando botões, solte o .modal('show');
e simplesmente faça:
$('#myModal').appendTo("body")
Isto irá manter todas as funcionalidades normais, permitindo-lhe mostrar o modal usando um botão.