Bootstrap Modal Örneği

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.


Yorumlar


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

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com