Cara Membuat Modal Gambar dengan Jquery

Halo semuanya, tak terasa kita berjumpa kembali di laman Source Code Aplikasi ini. Semoga teman-teman yang masih setia belajar seputar laman diberikan kemudahan dan medis ya.Di kesempatan kali ini saya akan membahas mengenai Cara Merancang Modal Gambar dengan Jquery. Pembahasan ini tak jauh berbeda dengan pembahasan sebelumnya yang saya bikin mengenai Cara Membuat Modal Text dengan Jquery. Teman-teman dapat lihat terlebih dahulu, agar dapat dengan gampang pada mengikuti pembahasan ini.

Oke seketika saja kita mulai membangun modal gambar ya teman-teman, pertama-tama buatlah folder dan siapkanlah sebuah gambar bebas atau teman-teman dapat unduh 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= tak terasa kita berjumpa kembali di laman Source Code Aplikasi ini Cara Merancang Modal Gambar dengan Jquery>
</center>
<button id=btn-close>CLOSE</button>
</div>
</center>

Apabila telah, 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 berikutnya, 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);
});
});

Apabila telah jangan lupa library jquery nya teman teman tambahkan, disini saya menggunakan library jquery CDN. Teman-teman dapat search digoogle. Oke kalau telah segala silahkan teman-teman jalankan/run dibrowser yang teman-teman gunakan. Apabila benar karenanya hasilnya akan sama seperti di gambar dibawah ini :

Lumayan gampang ya teman-teman ?, diatas adalah sebuah contoh sederhana pada Cara Merancang Modal Gambar dengan Jquery. Bagi pengembangannya silahkan teman-teman kreasi sendiri dengan rujukan basic seperti diatas.

Oke kalau seperti itu lumayan sekianlah pembahasan kali ini mengenai Cara Merancang Modal Gambar dengan Jquery. Semoga bermanfaat dan hingga bertemu dipembahasan berikutnya kita akan membangun modal video dengan jquery.

Terimakasih

Sumber https://kursuswebsite.org