Membuat Modal Dengan Bootstrap

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.  Selain itu, bootstrap modal juga bisa di gunakan untuk melakukan insert , edit maupun menampilkan sebuah data. Dan masih banyak lagi kegunaan modal (kotak dialog) yang bisa anda manfaatkan.

Untuk membuat modal bootstrap sangat mudah sekali, Karena dalam package bootstrap sudah tersedia plugin modal yang cukup anda gunakan dengan meletakkan atribut tertentu.

Untuk tutorial cara membuat pop up modal dengan bootstrap, saya asumsikan anda sudah melakukan installasi bootstrap dengan benar.

  1. Pengertian Modal

Modal atau yang biasa di sebut dengan pop up pada bootstrap adalah kotak dialog yang biasa di gunakan untuk melakukan konfirmasi . Selain itu modal juga bisa di gunakan untuk melakukan insert , delete, edit data dan form login .

  1. Penggunaan Modal

Pertama download bootstrap di getbootstrap.com. Buat folder baru dengan nama modal . Kemudian extract file bootstrap ke dalam folder modal .

Kemudian buat file dengan nama modal_bootstrap.html . Masukkan script di bawah ini ke dalam file modal_bootstrap.html

<!DOCTYPE html>

<html>

<head>

<title>Modal Bootstrap</title>

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/bootstrap.min.js”></script>

</head>

<body>

<div class=”container-fluid”>

<br><br><br>

<button type=”button” class=”btn btn-info btn-lg” data-toggle=”modal” data-target=”#myModal”>Open Modal</button>

<!– Modal –>

<div id=”myModal” class=”modal fade” role=”dialog”>

<div class=”modal-dialog”>

<!– Modal content–>

<div class=”modal-content”>

<div class=”modal-header”>

<button type=”button” class=”close” data-dismiss=”modal”>&times;</button>

<h4 class=”modal-title”>Modal Header</h4>

</div>

<div class=”modal-body”>

<p>Some text in the modal.</p>

</div>

<div class=”modal-footer”>

<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Maka saat di jalankan di browser , tampilan nya seperti di bawah ini :

Sumber : https://www.webhozz.com/blog/membuat-modal-dengan-bootstrap-3/

admin