tRikSonic
Tema
/ / Bootstrap 3 Modal - Tutorial Bootstrap Indonesia

Bootstrap 3 Modal - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.41
/ / Bootstrap 3 Modal - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Modal

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.
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.

Cara Membuat Modal Bootstrap

Untuk membuat modal dengan bootstrap silahkan pelajari contoh modal berikut :

Contoh :

<!-- 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>

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>

Ukuran Modal

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

Contoh Large Modal

<!-- 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>

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>

Contoh Small Modal

<!-- 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>

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>

4 komentar

Aji Jaka I. R.
Aji Jaka I. R.12/27/2018ReplyBalas Komentar ini
min, biar modal nya pas di klik di area backgroundnya gk langsung keluar, bagian mananya yg harus di edit?
Adi Jaya
Adi Jaya12/27/2018
Maksudnya Backdrop Modal ya. kalo itu maksudnya coba pakai ini

<div class="modal" id="...." data-backdrop="false">

</div>
Adi Jaya
Adi Jaya12/27/2018
atau ini

<div class="modal" id="..." data-backdrop="static" data-keyboard="false">

</div>

data-backdrop="static" [agar backdropnya tetap hitam transparant]
data-keyboard="false" untuk disable tombol Esc

Jika pakai javascipt pakai ini

$( selector ).modal({
backdrop: 'static',
keyboard: false
});
Hamidah
Hamidah7/09/2020ReplyBalas Komentar ini
Terima kasih..sangat membantu sekali..
Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

 
Loading.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.