Cara Membuat Modal Gambar dengan Jquery

Halo semuanya, tidak terasa kita berjumpa kembali di website dumetschool ini. Semoga teman-teman yang masih setia belajar seputar website diberikan kemudahan dan kesehatan ya.Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Modal Gambar dengan Jquery. Pembahasan ini tidak jauh berbeda dengan pembahasan sebelumnya yang saya buat tentang Cara Membuat Modal Text dengan Jquery. Teman-teman bisa lihat terlebih dahulu, agar dapat dengan mudah dalam mengikuti pembahasan ini.

Oke langsung saja kita mulai membuat modal gambar ya teman-teman, pertama-tama buatlah folder dan siapkanlah sebuah gambar bebas atau teman-teman bisa download gambar yang saya gunakan seperti dibawah ini :

Lalu run text-editornya dan ketiklah/copy script HTML seperti dibawah ini :

<center>
		<button id="btn">Modal Gambar</button> 
		<div id="bg"></div>
		<div id="modal">
			<p>CONTOH MODAL GAMBAR SEDERHANA</p><br>
			<center>
				<img src="gambar.png" alt="">
			</center>
			<button id="btn-close">CLOSE</button>
		</div>
	</center>

Jika sudah, tambahkan lah style/CSS seperti dibawah ini :

#modal{
	top:100px;
	left:520px;
	width: 500px;	
	position: absolute;
	position:fixed;
	z-index:99;
	display: none;
	background: white;
	border-radius: 5px;
	box-shadow: 2px 2px 2px black;	
}
 
#btn-close{	
	background: #e74c3c;
}
#btn-close{
	height: 30px;
	width: 100px;
	color: #fff;
	border: 0px;
	cursor: pointer;
}
#bg{
	position: absolute;
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index:99;
	opacity: 0.8;
}
#btn{
	background: lightgreen;
	font-weight: bold;
	width: 300px;
	border-radius: 5px;
	padding: 10px;  
	border: 0;  
	cursor: pointer;    
}
#btn:hover{
	opacity: 0.5;
	color: grey;
}

Oke, langkah selanjutnya, masukan script jquery seperti dibawah ini dan letakan dibawah sblm tag tutup body.

$(document).ready(function(){
	$('#btn').click(function(){
		$('#modal , #bg').fadeIn("slow");
	});
	$('#btn-close').click(function(){
		$('#modal , #bg').fadeOut("slow");
	});
});

Jika sudah jangan lupa library jquery nya teman teman tambahkan, disini saya menggunakan library jquery CDN. Teman-teman dapat search digoogle. Oke jika sudah semua silahkan teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan sama seperti pada gambar dibawah ini :

Cukup mudah ya teman-teman ?, diatas merupakan contoh sederhana dalam Cara Membuat Modal Gambar dengan Jquery. Untuk pengembangannya silahkan teman-teman kreasi sendiri dengan acuan dasar seperti diatas.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Modal Gambar dengan Jquery. Semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya kita akan membuat modal video dengan jquery.

Terimakasih

Cara Membuat Modal Gambar dengan Jquery

Kategori