Membuat Detail Popup Window dengan Bootstrap seperti Facebook

Membuat Detail Popup Window dengan Bootstrap seperti Facebook

Modal Window like Facebook - Sebenarnya Membuat Detail Popup Window dengan Bootstrap seperti Facebook ini merupakan kelanjutan dari judul sebelumnya terkait Bagaiamana Membuat Popup Window seperti di facebook? caranya sangat Mudah kawan, hanya memanfaatkan bootstrap saja. Modal keren dan full CSS3 ini saya terapkan di program skripsi saya tetang Pencarian Citra Berdasarkan Isi menggunakan Algoritma Transformasi Wavelet dengan memanfaatkan PHP sebagai Enginenya.

Langsung saja ya, berikut ini langkah-langkahnya :

1. Download bootstrap di http://getbootstrap.com/javascript/#modals

2. buat file html yang berisi kode berikut ini

/*Deskripsi Gambar*/

$('.imgHasil').hover(function(){

$(this).append('<div class="descImg"><img src="./images/layouts/zoom-in.png" title=\"'+$(this).attr('title')+'\" /></div>');

},function(){

$('.descImg').remove();

});

var bootstrapButton = $.fn.button.noConflict()

$.fn.bootstrapBtn = bootstrapButton

$('.imgHasil').click(function(){

var urlCitra = $(this).attr('dataImg').split(',p');

$('#detailCitra #myModalLabel').html('<center>Detail Lengkap Citra : <b>'+urlCitra[1].replace('.jpg','')+'</b></center>');

$('#detailCitra .detailImg').html('<img src="'+urlCitra[0]+'" />');

$('#detailCitra .desImg').html(

'<b>Detail Citra : </b><br />'+

'ID : '+urlCitra[2]+'<br />'+

'Nama : '+urlCitra[1].replace('.jpg','')+'<br />'+

'Energi : '+urlCitra[2]+'<br />'+

'Fitur : '+urlCitra[2]+'<br />'

);

$('#detailCitra').modal({

backdrop:'static',

keyboard:false

});

});

/*End Deskripsi Gambar*/

3. Paste code jquery berikut ini di file html yang dibuat tadi

<form method="post" action="./home.php?pencarianId=<?php echo md5("pencarian").md5("pencarianImage")."&token=".md5("pencarianImageToken").md5("iMageP")."&module=".md5("hasilPencarian"); ?>" enctype="multipart/form-data">

<div class="modal fade" id="detailCitra" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

 <div class="modal-dialog">

<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="myModalLabel">Upload Citra Latih</h4>

 </div>

 <div class="modal-body">

<div class="detailImg">

</div>

<div class="desImg">

</div>

<div class="clear"></div>

 </div>

 <div class="modal-footer">

<span>Citra Ini yang telah diproses untuk Mendapatkan Fitur Ciri Citra</span>

<input name="cari" value="Lihat Detail" type="submit" class="btn btn-primary">

 </div>

</div>

 </div>

</div>

</form>

4. Selesai, dan hasilnya seperti pada gambar diatas kawan

Pencarian Lain :

1. Membuat Modal Keren seperti di Facebook

2. Mendesaign Popup Window yang full Effect dengan jquery dan Bootstrap

3. Mengganti Judul (title) pada Modal di Bootstrap