Modalım için kodu doğrudan Bootstrap örneğinden kullandım ve yalnızca bootstrap.js'yi (bootstrap-modal.js'yi değil) dahil ettim. Ancak, modalım gri fade (arka plan) altında görünüyor ve düzenlenemiyor.
İşte böyle görünüyor:
Bu sorunu yeniden üretmenin bir yolu için [bu fiddle][2]'ye bakın. Bu kodun temel yapısı şu şekildedir:
<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;
}
Bunun neden olduğu veya bunu düzeltmek için ne yapabileceğim hakkında bir fikriniz var mı?
Modal kapsayıcı sabit veya göreli bir konuma sahipse veya sabit veya göreli konuma sahip bir öğenin içindeyse bu davranış gerçekleşir.
Sorunu çözmek için modal kapsayıcının ve tüm üst öğelerinin varsayılan şekilde konumlandırıldığından emin olun.
İşte bunu yapmanın birkaç yolu:
</body>
.position:
CSS özelliklerini kaldırabilirsiniz. Ancak bu, sayfanın görünümünü ve işlevini değiştirebilir.Sorun, ana konteynerlerin konumlandırılmasıyla ilgilidir. Modalınızı görüntülemeden önce bu konteynerlerden kolayca "move" edebilirsiniz. Modalınızı js kullanarak `gösteriyorsanız' bunu nasıl yapacağınız aşağıda açıklanmıştır:
$('#myModal').appendTo("body").modal('show');
Veya düğmeleri kullanarak modal başlatırsanız, .modal('show');
ifadesini bırakın ve sadece yapın:
$('#myModal').appendTo("body")
Bu, tüm normal işlevselliği koruyacak ve bir düğme kullanarak modalı göstermenize izin verecektir.