Hai teman-teman, masih sehat kan ?, hehe berjumpa kembali diwebsite dumetschool ini dan pada kesempatan kali ini saya akan membahas tentang Cara Membuat Modal Text dengan Jquery.
Sebenarnya banyak ya teman-teman plugin jquery tentang modal/pop-up dan lain-lain. Tapi kita disini tidak menggunakan plugin teman-teman, lalu kita buat modalnya bagaimana ? oke tenang, dipembahasan kali ini cukup menarik karena kali ini kita akan membuat sendiri modal tersebut tanpa plugin.
Bagaimanakah caranya ? oke baiklah langsung saja kita mulai mencoba Cara Membuat Modal Text dengan Jquery.
Langkah pertama, seperti biasa jalankan/run text editor yang digunakan, lalu ketiklah/copy script HTML dibawah ini :
<center> <button id="btn">Modal Text</button> <div id="bg"></div> <div id="modal"> <p>CONTOH MODAL TEXT SEDERHANA</p><br> <button id="btn-close">CLOSE</button> </div> </center>
Pada script diatas kita sudah membuat kerangka modalnya, lalu langkah selanjutnya teman-teman tambahkan style CSS nya seperti dibawah ini :
#modal{
top:100px;
left:520px;
width: 500px;
height: 200px;
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;
}
Jika sudah dengan cssnya, langkah terakhir teman-teman ketik/copy script jquery dan jangan lupa librarynya seperti dibawah ini :
$(document).ready(function(){
$('#btn').click(function(){
$('#modal , #bg').fadeIn("slow");
});
$('#btn-close').click(function(){
$('#modal , #bg').fadeOut("slow");
});
});
Dan dibawah ini hasil dari semua script diatas :
<html>
<head>
<title>modal text</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.2.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%23modal%7B%0A%09top%3A100px%3B%0A%09left%3A520px%3B%0A%09width%3A%20500px%3B%09%0A%09height%3A%20200px%3B%0A%09position%3A%20absolute%3B%0A%09position%3Afixed%3B%0A%09z-index%3A99%3B%0A%09display%3A%20none%3B%0A%09background%3A%20white%3B%0A%09border-radius%3A%205px%3B%0A%09box-shadow%3A%202px%202px%202px%20black%3B%09%0A%7D%0A%20%0A%23btn-close%7B%09%0A%09background%3A%20%23e74c3c%3B%0A%7D%0A%23btn-close%7B%0A%09height%3A%2030px%3B%0A%09width%3A%20100px%3B%0A%09color%3A%20%23fff%3B%0A%09border%3A%200px%3B%0A%09cursor%3A%20pointer%3B%0A%7D%0A%23bg%7B%0A%09position%3A%20absolute%3B%0A%09display%3A%20none%3B%0A%09position%3A%20fixed%3B%0A%09top%3A%200%25%3B%0A%09left%3A%200%25%3B%0A%09width%3A%20100%25%3B%0A%09height%3A%20100%25%3B%0A%09background-color%3A%20%23000%3B%0A%09z-index%3A99%3B%0A%09opacity%3A%200.8%3B%0A%7D%0A%23btn%7B%0A%09background%3A%20lightgreen%3B%0A%09font-weight%3A%20bold%3B%0A%09width%3A%20300px%3B%0A%09border-radius%3A%205px%3B%0A%09padding%3A%2010px%3B%20%20%0A%09border%3A%200%3B%20%20%0A%09cursor%3A%20pointer%3B%20%20%20%20%0A%7D%0A%23btn%3Ahover%7B%0A%09opacity%3A%200.5%3B%0A%09color%3A%20grey%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<center>
<button id="btn">Modal Text</button>
<div id="bg"></div>
<div id="modal">
<p>CONTOH MODAL TEXT SEDERHANA</p><br>
<button id="btn-close">CLOSE</button>
</div>
</center>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%09%09%24(document).ready(function()%7B%0A%09%09%09%24('%23btn').click(function()%7B%0A%09%09%09%09%24('%23modal%20%2C%20%23bg').fadeIn(%22slow%22)%3B%0A%09%09%09%7D)%3B%0A%09%09%09%24('%23btn-close').click(function()%7B%0A%09%09%09%09%24('%23modal%20%2C%20%23bg').fadeOut(%22slow%22)%3B%0A%09%09%09%7D)%3B%0A%09%09%7D)%3B%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
Jika sudah seperti diatas silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasil saat button di klik akan menjadi seperti pada gambar dibawah ini
Wow, bagaimana teman-teman ? mudah kan. Nah kita sudah berhasil dalam membuat modal tanpa menggunakan pluging jquery sedikit pun. Jadi seperti diatas adalah contoh sederhana nya. Dan untuk pengembangannya silahkan teman-teman kembangkan sesuai selera teman-teman.
Oke kalau begitu cukup sampai disini pembahasan kita tentang Cara Membuat Modal Text dengan Jquery. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih