Bootstrap Modal Eklentisi
Modal Eklenti
Modal eklentisi, geçerli sayfanın üstünde görüntülenen bir iletişim kutusu/açılır penceredir:
İpucu: Eklentiler ayrı ayrı (Bootstrap'in bireysel "modal.js" dosyası kullanılarak) veya tümü bir kerede ("bootstrap.js" veya "bootstrap.min.js" kullanılarak) dahil edilebilir.
Modal Nasıl Oluşturulur
Aşağıdaki örnek, temel bir modun nasıl oluşturulacağını gösterir:
Örnek
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Örnek Açıklama
"Tetikleyici" kısmı:
Kalıcı pencereyi tetiklemek için bir düğme veya bağlantı kullanmanız gerekir.
Ardından iki data-* özelliğini ekleyin:
data-toggle="modal"mod penceresini açardata-target="#myModal"kipin kimliğini gösterir
"Kip" kısmı:
Modalın ebeveyni <div>, modu tetiklemek için kullanılan data-target özniteliğinin değeriyle aynı olan bir kimliğe sahip olmalıdır ("myModal").
Sınıf , içeriği bir modal olarak .modaltanımlar ve ona odaklanır.<div>
Sınıf .fade, kipi içeri ve dışarı sokan bir geçiş efekti ekler. Bu efekti istemiyorsanız bu sınıfı kaldırın.
Bu özellik role="dialog", ekran okuyucu kullanan kişiler için erişilebilirliği artırır.
Sınıf .modal-dialog, kipin uygun genişliğini ve kenar boşluğunu ayarlar.
"Kalıcı içerik" bölümü:
<div>with class="modal-content", kipi biçimlendirir (kenarlık, arka plan rengi, vb.). Bunun içine <div>, kipin üstbilgisini, gövdesini ve altbilgisini ekleyin.
Sınıf .modal-header, kipin başlığının stilini tanımlamak için kullanılır. Başlığın <button>içinde, data-dismiss="modal"üzerine tıklarsanız modu kapatan bir öznitelik vardır. Sınıf .close, kapat düğmesini stillendirir ve .modal-titlesınıf, başlığı uygun bir satır yüksekliğiyle stillendirir.
Sınıf .modal-body, kipin gövdesinin stilini tanımlamak için kullanılır. Buraya herhangi bir HTML işaretlemesi ekleyin; paragraflar, resimler, videolar vb.
Sınıf .modal-footer, kipin altbilgisinin stilini tanımlamak için kullanılır. Bu alanın varsayılan olarak sağa hizalı olduğunu unutmayın.
Modal Boyut
.modal-sm
Küçük kipler için .modal-lgsınıf veya 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">
Varsayılan olarak, modlar orta büyüklüktedir.
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 .