Bootstrap Modal Yapısını Kullanma

Bootstrap İle Modal Pop-up Kullanımı

Bootstrap 3 ile birlikte gelen ve pek çok alanda kullanılan modal yapıları, kullanıcının bulunduğu sayfada yeni bir pencere açarak içerik göstermeyi sağlar. Bu özelliğin çalışabilmesi için bootstrap.js dosyasının veya özel olarak sadece modal.js dosyasının sayfa içerisinde çağrılması gerekir.

Modal Oluşturma

Basit haliyle bir modal yapısının nasıl oluşturulacağını bir örnekle anlatalım.

Önce neden bir buton kullandığımızı ve ona atadığımız değerleri açıklayalım.

  • Modal kullanmak için ekranda onu aktif hale getirecek bir link, buton vs. kullanmamız gerekir. Pencere otomatik olarak ekrana gelmeyeceği için onu bir yapıyla aktif hale getirmeliyiz.
  • Butona atadığımız data-toggle=”modal” ifadesi modal penceresinin açılmasını sağlar.
  • data-target=”#myModal” ise hangi id değerine sahip modal’ı kullanacağımızı belirtir.

Butonu oluşturduk ve artık sıra bu butona tıkladığımızda açılacak pencereyi oluşturmaya geldi. Burada daha önce atadığımız id değerini kullanıyoruz.

  • Modal’ı oluşturan div elemanı butondakiyle aynı id değerine sahip olmalıdır.
  • .modal sınıfı div elemanının içeriğinin modal olduğunu belirtir.
  • fade sınıfı pencerenin açılıp kapanırken efekt kullanmasını sağlar. Eğer pencerenin efekt kullanmasını istemiyorsanız bu sınıfı silebilirsiniz.
  • role=”dialog” özelliği “screen reader” kullanan kişilerin erişmesi için kullanılır.
  • .modal-dialog sınıfı genişlik ve margin için uygun değerlerin atanmasını sağlar.

Buraya kadar modal penceresini oluşturduk fakat içerikle ilgili herhangi bir şey eklemedik. İçeriğin nasıl ekleneceğini açıklayalım.

  • .modal-content sınıfı ile birlikte içerik eklemeye başladığımızı belirtiyoruz. Bu sınıf sayesinde pencerede kullanılacak pek çok css özelliği aktarılmış oluyor. Kullandığımız div elemanının içerisine ise header, body, footer gibi yapıları ekleyebiliriz.
  • modal-header sınıfı ile header bölümünü şekillendiriyoruz. Kullandığımız data-dismiss=”modal” özelliğine sahip buton tıklandığında pencereyi kapatmaktadır. close sınıfı bu butonu şekillendirmekte ve modal-title sınıfı satır yüksekliği için uygun değerin verilmesini sağlamaktadır.
  • modal-body sınıfı ile herhangi bir HTML sayfasının body bölümüne eklediğimiz yapıları ekleyebiliyoruz. Bu kısıma paragraflar, resimler, videolar vs. içerikle alakalı her şeyi ekleyebilirsiniz.
  • Son olarak modal-footer sınıfı ile oluşturulan div elemanını sayfanın footer bölümüyle aynı olarak kullanıyoruz.

Modal yapılarının genişliğini artırmak ve azaltmak için iki sınıfı kullanabiliriz. modal-dialog sınıfına sahip div elemanına modal-sm veya modal-lg sınıflarını ekleyerek genişliği küçültebilir veya büyütebiliriz.

Örnek bir modal yapısını aşağıda bulabilirsiniz. Siz de kullanıcıları özellikle giriş ve kayıt ekranı gibi bir işlem için farklı sayfaya yönlendirmek yerine modal yapısını tercih edebilirsiniz.

bootstrap modal

 

 

 

Bir Yorum

  1. murat

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: