Bootstrap Modal’lar, bootstrap framework’ü içinde bulunan pop-up pencereleridir. Aşağıdaki uygulama modal’lara bir örnektir.
Bir modal penceresi için öncelikle bir buton’a ihtiyaç vardır.
Butonumuzda en önemli parametremiz data-target parametresidir ve ismi modalımızın id’si ile aynı olmalıdır. Örnek: data-target="#modal1"
ayrıca data-toggle="modal" parametresini de button’umuza eklememiz gereklidir.
Modal ile ilgili özelliklere gelindiğinde ise, en dışda tüm modal’ı kapsayan bir div olmalıdır. Bu div’e ise class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" özellikleri verilmelidir.aria-labelledby parametresi ise modal’ımızın başlık özelliğinin belirtildiği parametredir. Modal’ın animasyon ile açılması istenmiyorsa class parametresinde fade özelliği kaldırılır.
modal class’ına sahip div’imizin içinde, class="modal-dialog" özelliğine sahip yeni bir div açılır.
Sonrasında ise class="modal-content", class="modal-header" özelliklerine sahip divler eklenir.
Modal’ın header kısmı için ise id="myModalLabel" özelliğine sahip bir H etiketi kullanılır. Modal içerik kısmı için class="modal-body" div’i oluşturulur.
En son olarak da class="modal-footer" bölümü ile modal tamamlanmış olur. Footer kısmında düğmeler bulunur. Modal’ı kapatmak için gerekli butondadata-dismiss="modal" özellikleri kullanılmalıdır.