Belajar Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
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
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
Tidak ada komentar :
Posting Komentar