Home / Bootstrap / Tutorial Bootstrap bagian 15: Membuat Modal dengan Bootstrap

Tutorial Bootstrap bagian 15: Membuat Modal dengan Bootstrap

Tutorial Membuat Modal dengan Bootstrap maksutnya bukan Modal usaha ya :D. Modal dalam website adalah sebuah kotak dialog yang dapat di munculkan ketika mengklik suatu objek. Objek dapat berupa button, gambar atau link. Penggunaan modal berbeda dengan popups yang biasanya muncul secara tiba-tiba, walaupun begitu dapat dikatakan dilihat dari bentuk modal itu hampir mirip dengan popups.

Kalau masih bingung bentuk modal itu seperti apa?, silakan lihat contoh gambar modal dibawah.

Contoh Modal

Penggunaan modal sangat menunjang performance website karena dengan adanya modal halaman tidak perlu lagi di load atapun dimuat ulang hanya untuk menampilkan detail sebuah informasi. Selain menampilkan informasi, modal juga dapat digunakan sebagai tempat form penginputan data, menyediakan pilihan(biasanya untuk pencetakan laporan) dan lain lain.

Untuk lebih jelasnya, berikut ini contoh Membuat Modal dengan Bootstrap.

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Modal dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">    
                    <h2>Ini contoh sebuah Modal</h3>
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        Klik untuk Tampilkan Modal - ITGeek.id
                    </button>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <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">Contoh Judul Modal</h4>
                                </div>
                                <div class="modal-body">
                                <p>Contoh isi sebuah Modal ITGeek.id Donec id elit non mi 
                                porta gravida at eget metus. Maecenas sed diam eget 
                                risus varius blandit. Donec id elit non mi porta
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary">Tutup Modal</button>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Untuk menampilkan modal, pada baris 12 terlebih dahulu harus kita buatkan objek untuk mengirimkan aksi menampilkan modal. Pada contoh ini menggunakan sebuah button, tutorial penggunaan button lihat di Cara membuat button menggunakan Bottstrap. Yang harus diperhatikan dalam button/ yang mengirimkan aksi adalah data-togle dan data-target nya, data-togle mengarah ke class modal dan data target akan memanggil id modal. Jadi jika di atas data-target=”#myModal” berarti nanti modal yang kita buat memiliki id myModal
  • Pada contoh pertama Membuat Modal dengan Bootstrap diatas, baris untuk membuat modal adalah baris 15 sampai baris 32. Pada baris 15 terlebih dahulu kita harus buatkan class modal disertai id. Id harus sama dengan data-target button yang menampilkan modal.
  • Selanjutnya pada baris 16 dan 17 buatkan class modal-dialog dan modal-content. Ini sudah aturan baku dan harus di ikutkan ketika membuat modalkarena judul modal, isi dan footer modal berada dalam kedua class ini.
  • Baris 18 sampai 21 adalah class modal-header. Pada abaris 19 untuk membuat tombol close(x) yang berada di sebelah kanan atas modal, baris 20 untuk menampilkan judul modal yang diletakkan pada heading dengan class modal-title.
  • Baris 21 sampai 27 berisi class modal-body. Informasi yang ingin disampaikan melalui modal di tempatkan pada class modal-body, isinya bentuk paragraf, gambar, form maupun tabel.
  • Baris 27 sampai 29 adalah class footer-modal dapat link berbentuk tulisan maupun button.

Hasil contoh pertama Membuat Modal dengan Bootstrap adalah sebagai berikut.

Contoh Modal dengan bootstrap

Contoh Membuat Modal dengan Bootstrap selanjutnya adalah, kita akan membuat modal yang berisi form penginputan data. Berikut ini

<!DOCTYPE html>
<html>
<head>
<title>Membuat Modal dengan Bootstrap - ITGeek.id</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
        <div class="row">
            <div class="col-md-12">    
                <h3>Modal untuk Penginputan Data</h3>
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        Tambah Data
                </button>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <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">INPUT DATA</h4>    
                            </div>
                            <div class="modal-body">
                                <form action="?" method="post">
                                    <div class="form-group">
                                    <label for="nim">NIM</label>
                                    <input type="text" class="form-control" name="nim" placeholder="Isikan NIM">
                                    </div>
                                    <div class="form-group">
                                    <label for="nama">Nama</label>
                                    <input type="text" class="form-control" name="nama" placeholder="Isikan Nama Lengkap">
                                    </div>
                                    <div class="form-group">
                                    <label for="alamat">Alamat</label>
                                    <textarea name="alamat"class="form-control" placeholder="Isikan Alamat Lengkap"></textarea>
                                    </div>
                                    <button type="submit" class="btn btn-info">Simpan</button>
                                    <button type="reset" class="btn btn-info">Batal</button>
                                </form>
                            </div>    
                            <div class="modal-footer">
                                Created by ITGeek.id
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
    </div>
</div>
<script src="js/jQuery v3.2.0.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Pada contoh Membuat Modal dengan Bootstrap yang kedua diatas, tidak ada perbedaan dengan contoh yang pertama. Hanya saja disini modal digunakan untuk menampilkan form penginputan data. Form ditempatkan dalam class modal-body.(baris 23 sampai 38). Tutorial yang membahas tetang form silakan baca di Merancang Form dengan Bootstrap.

Hasil contoh Membuat Modal dengan Bootstrap yang kedua sebagai berikut.

Hasil contoh 2 modal dengan bootstrap

Demikian tutorial Membuat Modal dengan Bootstrap. Selamat mencoba dan semoga bermanfaat.

Tutorial selanjutnya kita akan membahas cara membuat scrollspy dengan bootstrap. Scrollspy biasanya digunakan untuk membuat website yang single page.

Comments

comments

About admin

admin
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 12: Membuat Pills dan Tabs dengan Bootstrap

Tutorial sebelumnya kita sudah membahas tentang Membuat Navigation Bar(Navbar) dan Dropdown Menu dengan Bootstrap. Kali …

Leave a Reply

Your email address will not be published. Required fields are marked *

Inline
Inline