Apa yang dimaksud modal bootstrap?

TrikSonic - Modal Bootstrap adalah kotak dialog seperti Box PopUp yang dapat digunakan untuk memberikan sebuah informasi kepada pengguna/user atau bisa juga digunakan untuk meminta user untuk melakukan tindakan yang diperlukan sebelum melanjutkan sebuah perintah.

Table of Contents Show

Tutorial Bootstrap 3 Modal
Cara Membuat Modal Bootstrap
Ukuran Modal
Contoh Large Modal
Contoh Small Modal
Efek Animasi Memudar dan Menghapusnya
Contoh menggunakan efek Fade
Contoh Tanpa efek Fade
Apa itu modal pada bootstrap?
Apa itu modal dalam HTML?

Dengan Bootstrap keperluan membuat sebuah kotak dialog atau modal dapat dilakukan dengan mudah, fleksibel dan modern.

Berikut contoh dan tutorial yang bisa digunakan dalam pembuatan sebuah kotak dialog/modal.

Untuk membuat modal dengan bootstrap silahkan pelajari contoh modal berikut :

Contoh :

<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>


<div class="modal fade" id="tesModal">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Modal</h2>

<!-- tombol pemicu -->
<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>

<!-- Modal -->
<div class="modal fade" id="tesModal">
  <div class="modal-dialog">
    <div class="modal-content">
    <!-- header-->
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      <!--body-->
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      <!--footer-->
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>


<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>

Secara default Bootstrap Modal memiliki nilai ukuran medium, tapi untuk keperluan lainnya bootstrap sudah menyediakan nama class untuk mengatur ukuran dari Modal tersebut.

Nama class yang bisa digunakan untuk mengatur modal adalah .modal-lg (ukuran besar) dan .modal-sm (ukuran kecil), dan dituliskan setelah class dasar .modal-dialog

<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>


<div class="modal fade" id="tesModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Modal Large</h2>

<!-- tombol pemicu -->
<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>

<!-- Modal -->
<div class="modal fade" id="tesModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <!-- header-->
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      <!--body-->
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      <!--footer-->
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>


<!--note-->
<p>
Klik Tombol diatas. Silahkan rubah Lebar area Preview untuk melihat
Tampilan responsive modal
</p>

<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>

<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>


<div class="modal fade" id="tesModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
    
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Modal Large</h2>

<!-- tombol pemicu -->
<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>

<!-- Modal -->
<div class="modal fade" id="tesModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
    <!-- header-->
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      <!--body-->
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      <!--footer-->
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>


<!--note-->
<p>
Klik Tombol diatas. Silahkan rubah Lebar area Preview untuk melihat
Tampilan responsive modal
</p>

<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>

Efek Animasi Memudar dan Menghapusnya

Maksud dari animasi memudar adalah modal akan tampil dan hilang secara perlahan atau adanya jeda waktu

Efek animasi memudar ditentukan oleh nama class .fade pada class dasar .modal, contoh modal efek fade/memudar dapat dilihat pada contoh contoh sebelumnya

Jika tidak menginginkan efek fade pada modal cukup menghapus nama class .fade pada class dasar .modal

Contoh menggunakan efek Fade

<div class="modal fade" id="tesModal">
...
</div>

Contoh Tanpa efek Fade

<div class="modal" id="tesModal">
...
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Modal Large</h2>

<!-- tombol pemicu -->
<button class="btn btn-primary" data-toggle="modal" data-target="#tesModal">
  Buka Modal Tanpa Efek Animasi
</button>

<!-- Modal -->
<div class="modal" id="tesModal">
  <div class="modal-dialog">
    <div class="modal-content">
    <!-- header-->
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      <!--body-->
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      <!--footer-->
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>


<!--note-->
<p>
Klik Tombol diatas. Silahkan rubah Lebar area Preview untuk melihat
Tampilan responsive modal
</p>

<!-- jQuery, bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>

Membuat Modal dengan Bootstrap – Modal atau yang biasa di sebut pop up pada bootstrap adalah sebuah kotak dialog yang biasanya di gunakan untuk melakukan konfirmasi atas suatu aksi. Misal, ketika anda ingin menghapus suatu data, anda bisa menggunakan modal ini sebagai pesan konfirmasi atas aksi apa yang anda lakukan.

Modal adalah kotak dialog yang muncul pada halaman web. Cara kerja modal adalah ketika modal dalam kondisi aktif maka dialog box akan tampil dan halaman utamanya menjadi tidak aktif, namun halaman utama tetap dapat terlihat pada jendela browser.