Modal Eklentisi
Modal eklentisi geçerli sayfanın üst kısmında görüntülenen bir iletişim kutusu / açılan penceresidir:
İpucu: Eklentiler (Bootstrap bireysel kullanarak bireysel olarak dahil edilebilir "modal.js" (kullanarak veya tek seferde dosyası) "bootstrap.js" veya "bootstrap.min.js" ).
Bir Modal Nasıl oluşturun
Aşağıdaki örnek, bir temel kalıcı oluşturulması gösterilmiştir:
Ö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>
Kendin dene " Örnek Açıklaması
"Trigger" kısmı:
Modal pencere tetiklemek için, bir düğme veya bir bağlantı kullanmanız gerekir.
Sonra iki şunlardır data-* özelliklerini:
-
data-toggle="modal"modal pencere açar -
data-target="#myModal"modal id noktaları
"Modal" kısmı:
Üst <div> modal değeri ile aynı olan bir kimliği olması gerektiğini data-target kalıcı tetiklemek için kullanılan öznitelik ("myModal") .
.modal sınıf içeriğini tanımlayan <div> Bir modal olarak ve odağına getiriyor.
.fade sınıfı dışında ve kalıcı kaybolur bir geçiş etkisi ekler. Bu efekti istemiyorsanız bu sınıfı çıkarın.
Nitelik role="dialog" ekran okuyucu kullanan kişiler için erişilebilirlik geliştirir.
.modal-dialog sınıfı modal uygun genişlik ve marjını ayarlar.
"Modal content" kısmı:
<div> ile class="modal-content " stilleri modal (border, background-color, etc.) . Bu İçerisinde <div> , modal en başlık, gövde ve altbilgi ekleyin.
.modal-header sınıfı modal başlık için stil tanımlamak için kullanılır. <button> başlığı içinde bir sahiptir data-dismiss="modal" bunu tıklarsanız modal kapanır özelliği. .close sınıf stilleri kapatma düğmesi ve .modal-title sınıfı stilleri uygun bir satır yüksekliği ile başlık.
.modal-body sınıfı modal gövdesi için stil tanımlamak için kullanılır. Burada herhangi bir HTML biçimlendirmesi ekleme; paragraflar, resimler, videolar, vb
.modal-footer sınıfı modal altbilgi için stil tanımlamak için kullanılır. Bu alanda sağ varsayılan olarak hizalanmış unutmayın.
modal Boyut
Ekleyerek modal boyutunu değiştirme .modal-sm küçük kavram fiilleri veya için sınıf .modal-lg büyük kavram fiilleri için sınıfta.
Boyut sınıfı ekle <div> class ile eleman .modal-dialog :
Varsayılan olarak, modals orta büyüklüktedir.
Bootstrap Modal Referansı tamamlayın
Tüm modal seçenekler, yöntemler ve olaylar tam bir referans için lütfen gidin Bootstrap JS Modal Referans .