Ders 4 : Bootstrap Modal Kullanımı

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 :

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">

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

Ü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.