1

Apa itu modal bootstrap? belajar yuk!

Buat yang baru belajar framework bootstrap pasti bingung deh apaan itu modal bootstrap?

Hah modal? modal buat buka usaha? haha bukan gan!

Modal bootstrap adalah semacam kotak dialog yang muncul di tengah-tengah layar.


Contoh modal bootstrap kaya gini nih :
apa itu modal bootstrap

Nah udah paham kan? Yuk mari kita pelajari modal ini.

I. Cara dasar menggunakan modal bootstrap

Script dasarnya seperti ini gan (saya namain filenya modal.html) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- button for showing the modal -->
<a class="btn btn-success btn-sm saveModal" href="#" role="button" data-toggle="modal" data-target="#simpleModal">Show Modal</a>

<!-- Modal dialog -->
<div class="modal fade" id="simpleModal" tabindex="-1" role="dialog" aria-labelledby="simpleModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="titleModal">Simple Modal</h4>
			</div>
			<div class="modal-body">
				your content
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary saveModal">Save</button>
			</div>
		</div>
	</div>
</div>

 
** Penjelasan
– Baris 1,2,3 merupakan eksternal javascript & css yang dibutuhkan untuk menampilkan modal bootstrap.
– Baris 6 itu tombol untuk menampilkan modal.
Di baris 6 terdapat attribute data-target=”#simpleModal” pada tombol, artinya jika tombol itu ditekan maka akan menampilkan modal yang idnya #simpleModal (lihat baris 9, terdapat id=”simpleModal” juga)
– Baris 9-25 itu modalnya gan.

– Struktur modal bootstrap diatas dibagi menjadi 3 bagian, yaitu
   1) modal-header
   2) modal-body (content)
   3) modal-footer

biar lebih jelas ini ilustrasinya gan :
struktur modal

Coba demonya ada disini.

Pada demo tersebut, saat kamu menekan tombol ‘save’ maka ngga akan ada reaksi apa2. Ini karena kamu belum memberi event pada tombol tersebut.

Nah, dibawah ini akan dijelaskan cara membuat event pada bootstrap.

II. Membuat event pada modal bootstrap

a) event tombol save
Misalkan disini kita mau membuat event click pada tombol save di modal :
event click pada tombol save bootstrap

Maka kita perlu menambahkan sebuah event click pada tombol save tersebut :

...
<script>
$(document).ready(function(){
	$('.saveModal').click(function(){
		alert($('#yourName').val());
		alert('save');
	});
});
</script>
...

Scriptnya lengkapnya jadi seperti ini gan :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
$(document).ready(function(){
	$('.saveModal').click(function(){
		alert($('#yourName').val());
		alert('save');
	});
});
</script>

<!-- button for showing the modal -->
<a class="btn btn-success btn-sm" href="#" role="button" data-toggle="modal" data-target="#simpleModal">Save</a>

<!-- Modal dialog -->
<div class="modal fade" id="simpleModal" tabindex="-1" role="dialog" aria-labelledby="simpleModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="titleModal">Simple Modal</h4>
			</div>
			<div class="modal-body">
				<input type="text" id="yourName" class="form-control" placeholder="yourName" autofocus>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary saveModal">Show Modal</button>
			</div>
		</div>
	</div>
</div>

Coba demonya disini gan

b) menampilkan & menutup modal via jquery

1) Kita bisa menampilkan modal dengan script jquery berikut :

$('#simpleModal').modal('show');

2) Untuk menutup modal bisa pakai script ini :

$('#simpleModal').modal('hide');

 
3) Script lengkapnya jadi seperti ini gan :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
$(document).ready(function(){
	$('.tampilkanModal').click(function(){
		$('#simpleModal').modal('show');
	});
	$('.tutupModal').click(function(){
		$('#simpleModal').modal('hide');
	});
});
</script>

<!-- button for showing the modal -->
<a class="btn btn-success btn-sm tampilkanModal" href="#" role="button">Show Modal</a>

<!-- Modal dialog -->
<div class="modal fade" id="simpleModal" tabindex="-1" role="dialog" aria-labelledby="simpleModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="titleModal">Simple Modal</h4>
			</div>
			<div class="modal-body">
				<input type="text" id="yourName" class="form-control" placeholder="yourName" autofocus>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default tutupModal">Hide modal</button>
				<button type="button" class="btn btn-primary saveModal">Save</button>
			</div>
		</div>
	</div>
</div>

Coba demonya ada disini

Nah begitu kira-kira cara dasar penggunaan modal bootstrap, mudah-mudahan bermanfaat!
Sekian !

[related_post themes="text" id="2202"]

Ambar Hasbiyatmoko

Hello, I’m web developer. Passionate about programming, networking and web server. @kaskus  @facebook

One Comment

  1. mau tanya mas,kalau data sudah diinput via modal (case button edit ), begitu di klik data lama (existing diinput) ngga keluar kesalahannya dmn ya??

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.