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.

Web tasarımının geçmişinde önemli bir yer tutan popup pencerelerinin yerini artık tamamıyla alan modal yapısı Bootstrap‘in içerisinde de esnek ve akıllı bir fonksiyonelite ile barınıyor.

Bootstrap makale serimizin dördüncü adımında Bootstrap’in modal yapısını inceleyeceğiz.

Bootstrap Modal

Bootstrap’in modal öğesi responsive ve fonksiyonel yapısıyla günümüz arayüz kütüphaneleri arasında en dikkat çekici componentlerden biridir. Başlık, içerik ve footer olmak üzere üç parçadan oluşur ve her parça opsiyonel olarak kullanılabilir. Bu parçalara sırasıyla modal-header, modal-body ve modal-footer classlarıyla ilişkilendirilmiştir.

Temel görünüşü aşağıdaki gibidir :

mel görünüşü aşağıdaki gibidir :

Bootstrap Modal nasıl kullanılır?

Üstteki görüntüdeki yapıyı oluşturan HTML kodu aşağıdaki gibidir.

<div class="modal fade" tabindex="-1" role="dialog" id="ornekModal">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

<h4 class="modal-title">Modal Başlığı</h4>

</div>

<div class="modal-body">

<p>Modal İçeriği</p>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>

<button type="button" class="btn btn-primary">Değişiklikleri Kaydet</button>

</div>

</div><!-- /.modal-content -->

</div><!-- /.modal-dialog -->

</div><!-- /.modal -->

Üstteki HTML kodlarını sitenize ekledikten sonra herhangi bir elemana data-toggle=”modal” ve data-target=”#ornekModal” özelliklerini eklemeniz, söz konusu elemana tıklandığında modalın görünür olmasını sağlar. Örneğin yukarıdaki modalı açacak bir buton hazırlayalım.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ornekModal">
  Örnek Modali Aç
</button>

Modal Boyutları

Bootstrap modal için tanımlanmış large ve small olmak üzere iki ayrı opsiyonel boyut mevcut. Bu özellikleri modal-dialog‘un tanımlı olduğu division üzerinden yapmamız gerekiyor. Örneklendirecek olursak :

Büyük boy bir modal açmak için

<div class="modal-dialog modal-lg">

Küçük boy bir modal açmak için

<div class="modal-dialog modal-sm">

Hiçbir boyut belirtmemeniz halinde Bootstrap modal orjinal boyutuyla açılacaktır.

Bootstrap Modal animasyonu nasıl kaldırılır?

Bootstrap modal normalde fade animasyonu ile açılır ve kapanır. Ancak bu animasyonu kullanmadan daha basit bir açılış/kapanış istiyorsanız yapmanız gereken HTML kod içerisinde tanımlanmış fade classını silmek. Gerisi kendiliğinden olacaktır.

Gelişmiş Özellikleri

Özellik	Tipi	Varsayılan	Açıklama
backdrop	true/false/static	true	Modala perde ekler. Eğer static yapısı kullanılırsa perdenin tıklanmasında modalin kapanması önlenmiş olur.
keyboard	true/false	true	Escape’e basıldığında modalin kapanıp kapanmamasını yönetir.
show	true/false	true	Modalin açılıp kapanmasını yönetir.

Üstteki özellikleri detaylandıracak olursak;

Modal açmak için

$('#ornekModal').modal('show')

Modal kapatmak için

$('#ornekModal').modal('hide')

Modala perdesini kaldırmak için

$('#ornekModal').modal({backdrop: false})

---

Bootstrap Modal kullanımında nelere dikkat edilmeli?

1. Birden fazla modal kullanmaktan kaçının. Aksi halde yapıların üst üste binmesiyle görüntü kirliliği oluşabilir.
2. Modal’in HTML kodlarını body içerisinde en üstte tutun. Bu dizilim Bootstrap’in diğer elemanlarının veya sitenizde barınan custom elemanların modalın kodlarını ezmesini önleyecektir.
3. Mobil cihazlarda gösterilen modal elemanlarının fazla data barındırması ekranın dikey scroll işlemini zorlaştırabilir. Bu tip durumlarda modal’in modal-body elemanı CSS’in overflow özelliği ile yeniden düzenlenmelidir.

---

Bitirmeden Önce

Popupların aksine görüntülenen HTML içerisinde barından modal mantığı artık webin vazgeçilmezleri haline geldi. Bootstrap’in de bizlere sunduğu bu yapı hem kolay kullanışlılığı hem de fonksiyonelitesi sayesinde üçüncü parti bir kütüphaneye ihtiyaç duymamamızı sağlıyor.Bootstrap makale serimizin bir diğer adımıyla tekrar görüşmek üzere, iyi çalışmalar.