Sedikit Info Seputar
Membuat Detail Popup Window dengan Bootstrap seperti Facebook
Terbaru 2017
- Hay gaes kali ini team Official Sahabat Android, kali ini akan membahas artikel dengan judul Membuat Detail Popup Window dengan Bootstrap seperti Facebook, kami selaku Team Official Sahabat Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Official Sahabat Android. semoga isi postingan tentang
Artikel free tutorials, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Membuat Detail Popup Window dengan Bootstrap seperti Facebook
Terbaru
link: Membuat Detail Popup Window dengan Bootstrap seperti Facebook
Berbagi Membuat Detail Popup Window dengan Bootstrap seperti Facebook Terbaru dan Terlengkap 2017
 |
| 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">×</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
Itulah sedikit Artikel Membuat Detail Popup Window dengan Bootstrap seperti Facebook terbaru dari kami
Semoga artikel Membuat Detail Popup Window dengan Bootstrap seperti Facebook yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Official Sahabat Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Membuat Detail Popup Window dengan Bootstrap seperti Facebook