Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Bootstrap 3

Bootstrap 3 Modal - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Modal

TrikSonic - Modal Bootstrap ialah kotak obrolan menyerupai Box PopUp yang sanggup dipakai untuk memperlihatkan sebuah isu kepada pengguna/user atau sanggup juga dipakai untuk meminta user untuk melaksanakan tindakan yang diharapkan sebelum melanjutkan sebuah perintah.
Dengan Bootstrap keperluan menciptakan sebuah kotak obrolan atau modal sanggup dilakukan dengan mudah, fleksibel dan modern.
Berikut pola dan tutorial yang sanggup dipakai dalam pembuatan sebuah kotak dialog/modal.

Cara Membuat Modal Bootstrap

Untuk menciptakan modal dengan bootstrap silahkan pelajari pola 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 mempunyai nilai ukuran medium, tapi untuk keperluan lainnya bootstrap sudah menyediakan nama class untuk mengatur ukuran dari Modal tersebut.
Nama class yang sanggup dipakai untuk mengatur modal ialah .modal-lg (ukuran besar) dan .modal-sm (ukuran kecil), dan dituliskan sehabis 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 ialah modal akan tampil dan hilang secara perlahan atau adanya jeda waktu
Efek animasi memudar ditentukan oleh nama class .fade pada class dasar .modal, pola modal dampak fade/memudar sanggup dilihat pada pola contoh sebelumnya
Jika tidak menginginkan dampak fade pada modal cukup menghapus nama class .fade pada class dasar .modal

Contoh memakai dampak Fade

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

Contoh Tanpa dampak 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>