Bootstrap Modal Kullanımı (Attribute Üzerinden) - Using Bootstrap Modal Component (With Attributes)

Bootstrap Modal iki yöntemle kullanılabilmektedir. Bunlardan ilki attribute üzerinden diğeri ise Js kodları ile tetikleyerektir.

Attribute kullanarak Modal oluşturmak için aşağıdaki kod bloğu kullanılabilmektedir:

<button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Open Modal</button>

<!-- Modal -->
<br />
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
    <br />
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
        <br />
<h4 class="modal-title">
Modal Header</h4>
</div>
<div class="modal-body">
Some text in the modal.</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
</div>
</div>
</div>

Yukarıdaki kod bloğunu  aşağıdaki tuşa basarak çalıştırabilirsiniz.

Modal Header

Some text in the modal.

Burada dikkat edilecek en önemli unsurlar "data-dismiss" ve  "data-toggle" özellikleridir. Bunlardan ilki modalı kapatırken, diğeri modalı açıp kapatmaktadır.