MEMBUAT MODAL DENGAN BOOTSTRAP
Modal adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesana atau konfirmasi untuk suatu aksi, misalnya sobat ingn mebuat aksi menghapus data maka akan muncul kotak dialog yang kurang lebihnya seperti ini " Apakah anda ingin menghapus data ini ? " Banyak lagi yang dapat dilakukan oleh modal karna modal juga dapat menampilkan data dalam bentuk modal
Bootstrap memberikan plugin yang berfungsi untuk membuat modal, modal yang dihasilkan cukup bagus dan cara membuatnya pun mudah
CARA MEMBUAT MODAL DENGAN BOOTSTRAP
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 15 : Membuat Modal dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center><h1>Membuat Modal dengan Bootstrap | <a href="http://www.script-kiddies.org">Script Kiddies</a></h1></center>
<br/>
<!-- Tombol untuk menampilkan modal-->
<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">Buka 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">Bagian heading modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Bagian Body Modal</p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Akan saya jelaskan tentang pembuatan modal Bootstrap
data-target="#myModal"Pada tombol, isi dari atribut tersebut menentukan id modal yang akan dimunculkan ketika tombol "Buka Modal" diklik . Perhatikan pada contoh modal diatas.
<div id="myModal" class="modal fade" role="dialog">class "fade" berfungsi untuk memberi efek memudar ketika modal terbuka dan menutup
<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">Bagian heading modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Bagian Body Modal</p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
</div>
</div>
</div>
data-dismiss="modal"atribut data-dismis seperti diatas memiliki fungsi untuk menutup modal. Kemduian modal memiliki bagian kepala atau heading, body dan footer
<div id="myModal" class="modal fade" role="dialog">Sobat bisa ganti isi dari heading body dan footer modal sesuai keninginan sobat. Dan jika ingin memperkecil ukuran modal sobat dapat menambahkan class "modal-sm" dan untuk memperbesar modal tambahkan class "modal-lg"
<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">Bagian heading modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Bagian Body Modal</p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
KESIMPULAN
Bootstrap menyediakan fasilitas modal yang responsive dan mudah untuk digunakan. Kita tidak perlu susah payah membuat plugin modal tinggal memanggil classnya saja kita dapat membuat modal tersebut dan yang dihasilkan pun memuaskan
REFERENSI : Malas Ngoding
.jpg)
.jpg)
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment