Dua Cara Membuat Modal Pada Bootstrap

Tutorial Bootstrap kali ini akan membahas tentang pembuatang Modal dengan dua cara, dimana cara pertama tanpa menggunakan javascript dan cara kedua dengan menggunakan javascript.

Mungkin yang baru menekuni dunia web, terutama mahasiswa informatika yang baru bergelut lebih dalam dengan front-end web masih sedikit asing dengan modal. Untuk itu, dalam tutorial kali ini, kita akan dijelaskan dengan bahasa sederhana.

Apa itu modal pada Bootstrap ?

Modal Boostrap adalah sebuah kotak dialog yang muncul ditengah layar dan menutup halaman web tersebut. Untuk mudah memahaminya, perhatikan Gambar.1 dibawah ini :

(Gambar.1 Contoh Modal)

Coba perhatikan Gambar.1 diatas, sisi belakangnya akan tertutupi dengan modal dimana seolah-olah kota dialog tersebut membayangi halaman sebelum muncul kotak dialog.

Bagaimana cara membuat modal pada Bootstrap ?

Terdapat dua cara dalam pembuatan modal pada bootstrap :

Dengan menerapkan data attribut (tanpa javascript)
Dengan menggunakan javascript

Modal Bootstrap dengan data attribut

Dalam Boostrap 3.x terdapat beberapa data atribut dari modal yaitu :

data-toggle="modal", berfungsi sebagai pemicu (trigger) klik untuk membuk sebuah kotak dialog.
data-target="target-element", berfungsi sebagai kotak dialognya (mpdal)
data-dismiss="modal", berfungsi untuk menutup modal

Perhatikan contoh berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Contoh Modal Dengan Data Attribut</h2>
  <div class="modal" id="theModal" role="dialog">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      <h4 class="modal-title">Judul Modal</h4>
     </div>
     <div class="modal-body">
      Informasi dari modal body
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
     </div>
    </div>
   </div>
  </div>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#theModal">Open Modal without js</button>
</div>
</div>
</body>
</html>

Maka akan dihasilkan modal setelah diklik tombol "Open Modal without js" seperti yang ditunjukkan Gambar.2 dibawah ini :

(Gambar.2 Modal dengan Data Attribute)

Disini, data-toggle dan data-target diterapkan pada button. Dengan mengimplementasi button dengan attribut data-toggle, berarti kita memberitahukan button tersebut untuk memanggil jendela modal. Modal yang mana dipanggil, bergantuk pada nilai dari attribut data-target. Biasanya nilai dari data-target adalah perwakilan dari id atau class. Contoh diatas menggunkan id.

Modal Bootstrap dengan javascript

Untuk pembuatan modal dengan javascript, kita akan memanggil sebuah fungsi yang diletakkan pada button seperti contoh berikut :

<button type="button" class="btn btn-primary btn-lg" 
onclick="callMe()">Open Modal by Script</button>

Kemudian kita buat sebuah javascript untuk membangkitkan modal tersebut ketika diklik pada button tersebut:

<script>
function callMe() {
$('#theModal').modal('toggle');
}
</script>

Source code lengkapnya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Contoh Modal Dengan Java Script</h2>
  <div class="modal" id="theModal" role="dialog">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      <h4 class="modal-title">Judul Modal</h4>
     </div>
     <div class="modal-body">
      Informasi dari modal body
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
     </div>
    </div>
   </div>
  </div>
<button type="button" class="btn btn-primary btn-lg" onclick="callMe()">Open Modal by Script</button>
</div>
</div>
<script>
function callMe() {
$('#theModal').modal('toggle');
}
</script>
</body>
</html>

Outputnya ditunjukkan oleh Gambar.2 dibawah ini :

(Gambar.3 Modal dengan JS)

Dua Cara Membuat Modal Pada Bootstrap

Serba_Definisi 9:52 AM

Apa itu modal pada Bootstrap ?

Bagaimana cara membuat modal pada Bootstrap ?

Modal Bootstrap dengan data attribut

Modal Bootstrap dengan javascript

Share this:

Dua Cara Membuat Modal Pada Bootstrap

Serba_Definisi  9:52 AM

Apa itu modal pada Bootstrap ?

Bagaimana cara membuat modal pada Bootstrap ?

Modal Bootstrap dengan data attribut

Modal Bootstrap dengan javascript

Share this:

Serba_Definisi 9:52 AM