Bootstrap 4 Modal

Bootstrap4 Modal

Bootstrap'ta' bir butona tıklandığında ortaya çıkan bilgilendirme ve uyarı nesnelerine modal adı verilir. Modal'lar ortaya çıktığında sayfa arka planı da kararır ve modal nesnesi daha belirgin bir halde görünür.
Bir modal oluşturmak için öncelikle modal'ı tetikleyecek bir buton oluştulması gerekir.
Bu butona data-toggle="modal" data-target="#modal1" parametre ve değerleri verilmelidir.
Butonun data-target parametresine modal'a vereceğimiz id değerini vermemiz gerekir.
Örnek: <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1"> Modal 'ı Çalıştır </button> Modal nesnesini oluşturmak için gerekli kodlar ise aşağıdaki gibi olmalıdır.
Görüldüğü gibi butona verilen data-target değeri ile modal div'inin id değeri aynıdır.
modal-dialog-centered ile modal'ımız dikey olarak sayfanın tam ortasında konumlanır.
modal-content özelliğine sahip div in içine tüm modal içeriği gelecektir.Modal içeriği başlık(header), gövde(body) ve alt(footer) bölümlerinden oluşur.
modal-header ve modal-title ile modal başlığı,
modal-body ile açıklama(gövde) bölümü ve
modal-footer ile de butonların bulunduğu alt kısım oluşturulur.
header, body ve footer bölümlerinin bir veya bir kaçı olmadan da modal oluşturulabilir.
Modal genişliğini değiştirmek için modal-content özelliğine sahip div nesnesine modal-lg veya modal-sm özellikleri de verilir. Son olarak kapatma işlemi için görevli olan nesneyedata-dismiss="modal" değeri verilerek kapatma işlemi de yapılır. <div class="modal fade" id="modal1" tabindex="-1" role="dialog" > <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal Başlığı</h5> <button type="button" class="close" data-dismiss="modal" > <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <h4>Modal İçerik</h4> Burası modal içerik bölümüdür. <strong>modal-body</strong> class'ına sahip div'in içinde bulunur. Burası modal içerik bölümüdür. <strong>modal-body</strong> class'ına sahip div'in içinde bulunur. Burası modal içerik bölümüdür. <strong>modal-body</strong> class'ına sahip div'in içinde bulunur. Burası modal içerik bölümüdür. <strong>modal-body</strong> class'ına sahip div'in içinde bulunur. Burası modal içerik bölümüdür. <strong>modal-body</strong> class'ına sahip div'in içinde bulunur. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button> </div> </div> </div> </div>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın