Bootstrap Modal Plugin

Pengertian Bootstrap Modal

Modal bootstrap adalah sebuah kotak dialog bootstrap yang menampilkan konten yang berisi informasi dan dapat memiliki beberapa interaksi tanpa meninggalkan web induk.

Untuk bisa menggunakan modal bootstrap kita membutuhkan file javascript yaitu bootstrap.js atau bootstrap.min.js diminimalkan.

Bootstrap Modal Plugin

Dasar pembuatan modal plugin adalah sebagai berikut :

1. Gunakan data atributeSeting atribute data-toggle=”modal” sebagai kontrol elemen, data-target=”#identifier” atau href=”#identifier”.
2.  Buatlah kode javascript dan masukkan kode program javascript $('#identifier').modal(options).

Contoh kode program membuat Modal bootstrap adalah sebagai berikut :

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->

<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-hidden="true">

&times;

</button>

<h4 class="modal-title" id="myModalLabel">

This Modal title

</h4>

</div>

<div class="modal-body">

Add some text here

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default"

data-dismiss="modal">Close

</button>

<button type="button" class="btn btn-primary">

Submit changes

</button>

</div>

</div><!-- /.modal-content -->

</div><!-- /.modal →

Penjelasan kode program :

1. Untuk memanggil modal, kita harus mempunyai pemicu dan disini kita menggunakan tombol atau link sebagai pemicunya. 
2. Jika Anda melihat dalam kode di atas, Anda akan melihat bahwa dalam <button> tag, data-target = "# myModal" adalah target dari modal yang Anda inginkan, untuk memuat pada halaman. Kode ini memungkinkan Anda untuk membuat beberapa kata modal pada Halaman dan kemudian memiliki pemicu yang berbeda untuk masing-masing. Sekarang, harus jelas, Anda tidak memuat beberapa kata modal pada saat yang sama, tetapi Anda dapat membuat banyak pada halaman yang akan dimuat pada waktu yang berbeda. 
3. Ada dua kelas untuk mencatat di modal, Yang pertama adalah class .modal, yang hanya mengidentifikasi isi <Div> sebagai modal. Dan yang kedua adalah class .fade. Ketika modal yang toggle, maka akan menyebabkan konten terlihat memudar dalam dan keluar class = "close", untuk tombol close dari jendela modal.