Cara Membuat Modal Menggunakan Bootstrap



Cara Membuat Modal Menggunakan Bootstrap

Modal atau bisa kita sebut juga dengan pop-up yang maksudnya adalah jika kita menekan sebuah tombol button pada suatu website, maka nantinya akan muncul sebuah kotak dialog secara otomatis nah itulah yang dinamakan Modal atau pop-up.

 Adapun cara bagaimana caranya kita membuat sebuah pop-up atau Modal pada website yang kita rancang dengan menggunakan framework Bootstrap. Kenapa saya menggunkan bootstrap? Sebab dengan menggunkan bootstrap semua sudah ada didalamnya, lengkap dan mudah untuk digunakan serta banyak juga tutorial bagaimana cara menggunakan bootstrap.

 Untuk mempersingkan waktu, kita masuk ke pembahasannya. Pertama kita download terlebih dahulu bootstrapnya, atau kamu bisa melihat di artikel ini. Selanjutkan ekstrak dan tempatkan difolder yang kamu pakai. Selanjutnya copy code dibawah ini :

<html>
    <head>         
      <title>Latihan Modal | Bootstrap</title>         
      <meta name="viewport" content="width=device-width, initial-scale=1.0">         
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">      
   </head>
  <body>
    <div class="container">
         <center><h1>Membuat Modal dengan Bootstrap</h1><br/>
            <!-- Tombol untuk menampilkan modal-->
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>
                   <h1>TutorialPedia.NET</h1>
</center>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- konten modal-->
            <div class="modal-content">
                <!-- heading modal -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Bagian heading modal</h4>
                </div>
                <!-- body modal -->
                <div class="modal-body">
                    <p>bagian body modal.</p>
                </div>
                <!-- footer modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
                </div>
            </div>
        </div>
    </div>
   </div>
             <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Penjelasan code

data-target="#myModal"
Maksud dari code diatas adalah sebagai id modal yang akan dipakai ketika mengklik tombol. 

Perhatikan code berikut :

<!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- konten modal-->
            <div class="modal-content">
                <!-- heading modal -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Bagian heading modal</h4>
                </div>
                <!-- body modal -->
                <div class="modal-body">
                    <p>bagian body modal.</p>
                </div>
                <!-- footer modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
                </div>
            </div>
        </div>
     </div>

Class fade digunakan untuk animasi atau memberikan sebuah efek ketika modal muncul ketika tombol diklik. data-dismiss difungsikan untuk menutup dialog yang sudah muncul pada saat tombol di klik.

<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 class="modal-title">Bagian heading modal</h4>
 </div>

 Code diatas adalah heading dari modal.

<!-- body modal -->
<div class="modal-body">
    <p>bagian body modal.</p>
</div>

 Dan code diatas adalah body dari modal.

<!-- footer modal -->
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>

 Dan code diatas adalah bagian footer dari modal.

 Jika sudah diterapkan dengan benar, maka hasilnya adalah seperti gambar dibawah ini :


Mungkin hanya segitu yang bisa disampaikan, dan selamat mencoba.

(Sumber: Tutorial PediaI)

Baca Juga

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)