Kategori Random

Membuat Modal Bootstrap PHP

Posted : 19 Maret 2015 | 03:00:11 , Dibaca 15433 kali

Bootstrap kita ketahui adalah sebuah framework CSS yang sangat familiar dan super, sangat membantu kita dalam membangunn aplikasi maupun website bisa dibaca pada artikel berikut Mengenal lebih jauh twitter bootstrap. Seperti fungsi sebagai framework berarti kita dipermudah dengan fitur-fitur yang telah disediakan didalamnya. Salah satu fitur keren dari bootstrap adalah modal

 

Mari kita buat contoh penggunaan pada skrip html

<!-- Tombol Untuk menampilkan modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Buka Modal
</button>

<!-- Dialog 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">Modal Judul</h4>
      </div>
      <div class="modal-body">
        ... isi modal bisa table bisa text biasa ....
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Contoh skrip diatas sudah bisa menjalankan sebuah modal, dan jangan lupa tentunya untuk include core bootstrap dan jquery nya. 

  1. Pada skrip diatas pada button terdapat
    data-toggle="modal" data-target="#myModal"
    data-toggle berfungsi untuk menjalankan perintah bahwa yang dibuka nanti adalah jenis modal yang sudah ditanam pada core bootstrap. Kemudian data-target berfungsi sebagai penanda sebuah id yang akan di kirim ke dialog modal, jadi kita bisa buat beberapa tombol dengan target yang berbeda.
  2. Pada skrip dialog modalnya
    class="modal fade" id="myModal"
    class=modal fade berfungsi sebagai style css dan effect tampilan yang dibawa dari core bootstrap bisa diganti sesuai selera.  id=myModal sebagai identitas yang diterima dari button.
  3. Skrip close
    data-dismiss="modal"
    berfungsi untuk menutup modal

Fungsi options yang terdapat pada modal bootstrap

Name type default description
backdrop boolean or the string 'static' true klik diluar modal untuk close modal
keyboard boolean true close modal dengan tombol esc
show boolean true Shows the modal when initialized.
remote path false  
Saya akan membahas tentang penggunaannya pada CRUD php pada artikel selanjutnya, terimakasih semoga bermanfaat.

Postingan Terkait
» Modal Bootstrap tahap III: Membawa kode unik ke modal ( 05 Apr 2017 | 06:24:03 , 1658 hits )
» Modal Bootstrap tahap II : Membawa kode unik ke modal ( 04 Apr 2017 | 07:34:44 , 1456 hits )
» Membuat Template Bootstrap dengan Cepat dan Gampang ( 12 Feb 2016 | 09:00:29 , 5701 hits )
» Trik Zoom Image View pada postingan dengan CSS ( 23 Sep 2015 | 07:05:18 , 2941 hits )
» Bootstrap : Membuat Tab Horizontal ( 20 Feb 2015 | 04:58:20 , 6009 hits )