Bootstrapta Modal Uygulaması

Bootstrapın Modal eklentisi ile web sayfasının üst kısmında  açılır pencere şeklinde açılan bir iletişim kutusudur.

Modal açılır pencereleri ile  kullanıcıyı bulunduğu sayfayı kaydetmeden ya da önemli bir veriyi silmeyi gerçekleştirmek üzere iken uyarı mahiyetinde  iletişim kutuları oluşturulmaktadır.

Bootstrapın modal ugulaması ile bir başlık, mesaj içeriği ve kullanıcı için altbilgi butonları kullanarak esnek açılır bilgi pencereleri oluşturmak kolaydır.

Bootstrapın resmi sitesinden alınan örnek kodlar aşağıdaki şekildedir:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade"id="myModal"tabindex="-1" role="dialog"aria-labelledby=
"myModalLabel"aria-hidden="true">
  <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" id="myModalLabel">Modal başlığı</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div> 

Kodu çalıştırdığımızda oluşan Launch demo Modal adındaki butona tıkladığımızda modal açılır ekranı aşağı doğru süzülerek açılır. Kapattığımızda da  süzülerek yukarıdan kaybolur. Bu animasyon istenmiyorsa fade sınıfını kaldırmak gerekmektedir.

Bu örnek modalda; modalı açmak için bir buton, bir başlık, bir içerik (....) ve bir altbilgi olarak butonlar oluşturulmuştur. 

Modalı kapatmak için herhangi bir butona data dismiss-"modal" parametresini vermemiz yeterlidir.

Modal-diyalog satırını aşağıda ki gibi değiştirerek lg boyutunda modal oluşturabiliriz.

Büyük Modal  Kodu:

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

veya lg yi md ya da sm yaparak modalı büyültüp küçültebiliriz..

Modal-body içine; paragraflar, metinler, resimler ve videolar ekleyebiliriz. 

Modal-content içine; arkaplan rengi, sınırları ve köşeleri yuvarlatılmış stiller ekleyebiliriz.

Örnekleri GÖRÜNTÜLE:

Kaynak Kodları İNDİR:

Bu konudaki anlatımları aşağıda ki videodan detaylı bir şekilde takip edebilirsiniz.