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

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

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

<script type="text/javascript">

function Close()
{
   $('#myModal').modal('hide');
}

function Open()
{
   $('#myModal').modal('show');
}

function Toggle()
{
   $('#myModal').modal('toggle');
}

</script>

Yukarıdaki Javascript kodları modal üzerinde yer alan tuşlara fonksiyonelik kazandırılması amacıyla kullanılmaktadır. Javascript kodları yazıldıktan sonra Bootstrap Modalı tanımlayalım:

<button class="btn btn-info btn-lg" type="button" onclick="Toggle()">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" type="button" onclick="Close()">×</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" type="button" onclick="Close()">Close</button>
      </div>
</div>
</div>
</div>

Yukarıdaki kodları aşağıdaki tuşa basarak çalıştırabilirsiniz:

Modal Header

Some text in the modal.

Burada javascript "modal" fonksiyonu ile modal yönetilebildiği gösterilmiştir. "toggle" parametresi modalı açıp kapatmaya, "show" parametresi modalı göstermeye ve "hide" parametresi modalı gizlemeye yaramaktadır.