Pada tutorial kali ini saya akan berbagi tutorial tentang
membuat modal atau popup window yang tampil di
atas halaman web saat ini. Modal yang akan di buat pada tutorial kali
ini akan menggunakan framework front end yang popular yaitu Bootstrap.
Untuk memulai tutorial kali ini, teman harus menyiapkan
Bootstrap CSS JS dan Jquery JS , bila belum punya teman bisa mendownload
nya atau teman juga bisa menggunakan CDN(Content Delivery Network)
1. Siapkan Bootstrap CSS, JS dan Jquery JS.
Untuk menggunakan bootstrap teman perlu meng include
Botstrap Css JS dan Jquery JS ke page HTML. untuk meload nya seperti biasa kita
tempatkan di antara tag head HTML biar lebih jelas bisa dilihat contoh
dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
2. Trigger atau Event
Triger digunakan untuk menampilkan komponen modal
atau event ketika apa modal tersebut muncul, contoh yang saya tulis di tutorial
kali ini adalah komponen button untuk menampilkan modal nya. Untuk lebih jelas
nya bisa dilihat sourcode dibawah ini
<button
type="button" class="btn btn-info btn-lg"
data-toggle="modal" data-target="#modal">Buka
Modal</button>
3. Komponen Modal
Komponen modal adalah popup window yang di tampilkan
ketika trigger di klik, contoh sourcode nya lihat di bawah ini
<!-- Modal -->
<div
class="modal fade" id="modal" role="dialog">
<div
class="modal-dialog">
<!-- Modal
content-->
<div
class="modal-content">
<div
class="modal-header">
<button
type="button" class="close" data-dismiss="modal">×</button>
<h4
class="modal-title">Modal Header</h4>
</div>
<div
class="modal-body">
<p>Hai Saya
Modal!!!.</p>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-default"
data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
Sebagai catatan, komponen atau sourcode yang di tulis
tadi harus berada pada container class. Berikut full source code nya
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Bootstrap
Example</title>
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="container">
<h2>Modal
Example</h2>
<!-- Trigger the
modal with a button -->
<button
type="button" class="btn btn-info btn-lg"
data-toggle="modal" data-target="#modal">Buka
Modal</button>
<!-- Modal
-->
<div
class="modal fade" id="modal" role="dialog">
<div
class="modal-dialog">
<!-- Modal
content-->
<div
class="modal-content">
<div
class="modal-header">
<button
type="button" class="close" data-dismiss="modal">×</button>
<h4
class="modal-title">Modal Header</h4>
</div>
<div
class="modal-body">
<p>Hai Saya
Modal!!!.</</p>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-default"
data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Dan ini hasil nya ketika sukses mengikuti
langkah-langkah di atas, bisa eksplore sendiri bila ingin menerapkan
modal ini di website atau blog teman.
Oh sedikit catatan juga, apabila include
Bootstrap dan Jquery nya melalui CDN agar berhasil teman harus terkoneksi
internet dahulu. Sekian tutorial kali ini, mudah-mudahan bermanfaat dan
sampai ketemu di tutorial selanjutnya. Happy Learning and Happy Sharing!!!
Comments
Post a Comment