Modal adalah sebuah komponen yang berbentuk seperti pop up, elemen website yang muncul dengan cara melayang dan menutupi elemen-elemen website lainnya.
Biasanya modal digunakakan untuk menampilkan pesan notifikasi, form penginputan data, form edit, dan sebagainya pada halaman website.
Ada beberapa fitur yang disediakan bootstrap pada komponen modal, ada modal seperti pop up biasa, ada yang otomatis memunculkan scrollbar ketika konten yang ada di dalamnya terlalu panjang, dan lain-lain.
1. Cara Membuat Modal / Pop up dengan bootstrap 4
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Modal Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<!-- Tombol yang memicu modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalSaya">
Input Data Buku
</button>
<!-- Contoh Modal -->
<div class="modal fade" id="modalSaya" tabindex="-1" role="dialog" aria-labelledby="modalSayaLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalSayaLabel">Form Input Data Buku</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Selamat Datang di Form Input Data Buku.
<br />
Perpustakaan SMK Negeri 1 Cimahi.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>Pada syntax di atas, ada 2 bagian yang kita buat (yang di tandai dengan comment di atas). Yaitu bagian tombol yang kita jadikan sebagai pemicu munculnya pop up / modal bootstrap (Input Data Buku), jika tombol tersebut diklik maka modal akan muncul secara otomatis.
Atribut yang ada pada elemen <button> .. </button>, ada atribut data-target=”#modalSaya” yang berguna untuk memberitahukan modal mana yang akan ditampilkan pada saat tombol diklik, karena isi dari atribut data-target adalah #modalSaya, maka modal yang ditampilkan adalah modal yang memiliki id modalSaya (id=”modalSaya”).
Hasilnya :
Di dalam elemen modal, ada tiga bagian, yaitu bagian :
- header modal => biasanya diisi judul modal
- body modal => biasanya diisi konten modal
- footer modal => biasanya diisi dengan tombol
2. Ukuran Modal Bootstrap 4
Class untuk mengubah ukuran modal bootstrap 4 bisa kita tuliskan beriringan dengan class .modal-dialog.
- modal-xl => modal berukuran paling besar
- modal-lg => modal berukuran besar
- modal-sm => modal berukuran kecil
contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Modal Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<!-- Extra large modal / Modal paling besar-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalPalingBesar">Extra large modal</button>
<div class="modal fade modalPalingBesar" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5>Modal extra large (xl)</h5>
</div>
<div class="modal-body">
Contoh modal berukuran paling besar.
</div>
</div>
</div>
</div>
<!-- Large modal / Modal besar-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalBesar">Large modal</button>
<div class="modal fade modalBesar" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5>Modal large (lg)</h5>
</div>
<div class="modal-body">
Contoh modal berukuran sedang.
</div>
</div>
</div>
</div>
<!-- Small modal / Modal kecil-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalKecil">Small modal</button>
<div class="modal fade modalKecil" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5>Modal small / kecil (sm)</h5>
</div>
<div class="modal-body">
Contoh modal berukuran paling kecil.
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>Perhatikan atribut data-target=”” pada tombol masing-masing, di sana kita menggunakan titik (.), karena modal yang kita perintahkan untuk tampil kita definisikan menggunakan class. Misalnya tombol yang pertama kita menuliskan data-target=”.modalPalingBesar”, berarti modal yang dijalankan adalah modal yang memiliki class modalPalingBesar.
Hasilnya :
3. Modal Scroll
Jika konten yang ada di dalam modal terlalu panjang, untuk mengatasi tampilan yang berantakan kita gunkan modal scrroll. Sehingga tampilan modal tidak akan berantakan, karena akan muncul scroll ketika konten yang ada dalam modal lebih panjang dari ukuran modal itu sendiri.
Untuk membuat modal yang memiliki efek scroll, kita tinggal menambahkan class modal-dialog-scrollable beriringan dengan class modal-dialog .
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Modal Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contohModalScroll">
Modal Scroll
</button>
<div class="modal fade" id="contohModalScroll" tabindex="-1" role="dialog" aria-labelledby="contohModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="contohModalScrollableTitle">Contoh modal scroll bootstrap</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Tutorial Bootstrap 4</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit illo sint nobis vel voluptatibus quod nemo repellat fugit laudantium, dicta ut provident cumque, officiis magni harum est facilis incidunt.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>Hasilnya :
Referensi :
- https://getbootstrap.com/docs/4.3/components/modal/
- cssfhttps://www.malasngoding.com/modal-bootstrap-4/
Be the first to comment