Önyükleme 4 Modalı
Önyükleme 4 Modalı
Modal bileşeni, geçerli sayfanın üstünde görüntülenen bir iletişim kutusu/açılır penceredir:
Modal Nasıl Oluşturulur
Aşağıdaki örnek, temel bir modun nasıl oluşturulacağını gösterir:
Örnek
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Animasyon ekle
.fadeModu açarken ve kapatırken bir solma efekti eklemek için sınıfı kullanın :
Örnek
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Modal Boyut
.modal-sm
Küçük kipler için .modal-lgsınıf, büyük kipler için sınıf veya .modal-xlekstra büyük kipler için sınıf ekleyerek kipin boyutunu değiştirin .
<div>Size sınıfını class ile öğeye ekleyin .modal-dialog:
Küçük Modal
<div class="modal-dialog modal-sm">
Büyük Modal
<div class="modal-dialog modal-lg">
Ekstra Büyük Modal
<div class="modal-dialog modal-xl">
Modeller varsayılan olarak "orta" boyuttadır.
Merkezli Modal
Modalı, .modal-dialog-centered
sınıfla birlikte sayfa içinde dikey ve yatay olarak ortalayın:
Örnek
<div class="modal-dialog modal-dialog-centered">
Kaydırma Modalı
Modal içinde çok fazla içerik olduğunda, sayfaya bir kaydırma çubuğu eklenir. Bunu anlamak için aşağıdaki örneklere bakın:
Örnek
<div class="modal-dialog">
Ancak, aşağıdakileri ekleyerek sayfanın kendisi yerine yalnızca kipin içinde kaydırma yapmak .modal-dialog-scrollablemümkündür .modal-dialog:
Örnek
<div class="modal-dialog modal-dialog-scrollable">
Eksiksiz Bootstrap Modal Referansı
Tüm mod seçeneklerinin, yöntemlerinin ve olayların tam bir referansı için Bootstrap JS Modal Referansımıza gidin .