Lebak Cyber Kursus Pemrograman Gratis
Membuat Modal Menggunakan Bootstrap
lebakcyber.net – Membuat Modal menggunakan Bootstrap. Pada kesempatan kali ini kita akan mencoba untuk membuat sebuah modal dengan memanfaatkan class yang telah disediakan oleh bootstrap.
Modal sendiri merupakan sebuah kotak dialog atau sering juga disebut popup yang berisi konfirmasi atau pesan pada suatu aksi. Didalam modal kita dapat membuat sebuah persetujuan atas suatu aksi, membuat promosi atau misalnya sebagai konfirmasi pada saat kita ingin menghapus sebuah data maka kita bisa memanfaatkan modal sebagai bentuk konfirmasinya.
Bootstrap telah menyediakan plugin modal yang dapat kita gunakan dengan begitu mudah. Untuk lebih jelasnya sebaiknya langsung saja kita praktekan bagaimana cara membuat modal dengan memanfaatkan class yang telah disediakan oleh bootstrap.
Sekarang kita akan mencoba untuk mempraktekan bagaimana cara untuk membuat modal dengan menggunakan class yang telah disediakan oleh bootstrap jadi silahkan buat sebuah file baru dengan nama index.html lalu masukan perintah seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Modal di Bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h1>Membuat Modal dengan Bootstrap</h1></center>
<br/>
<!-- Button yang digunakan untuk menampilkan modal-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Sebuah Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ini adalah heading dari Modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Ini bagian body dari modal</p>
<p><b>lebakcyber.net</b></p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Button Untuk Menutup Modal</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Nanti hasilnya akan seperti pada gambar dibawah ini :
Oke jadi seperti itulah bagaimana cara untuk membuat modal di bootstrap dengan memanfaatkan fitur yang telah disediakan oleh bootstrap sehingga kita dapat dengan mudah untuk membuat sebuah modal pada halaman web yang sedang kita buat.
Semoga tutorial mengenai Modal di bootstrap ini dapat bermanfaat bagi kalian yang sedang belajar bootstrap dan sampai jumpa di tutorial belajar bootstrap lainnya.
