Cara Membuat Modal Text dengan Jquery
Haloo teman-teman, masih sehat kan ?, hehe berjumpa kembali diwebsite Source Code Aplikasi ini dan di kesempatan kali ini saya akan membahas mengenai Cara Merancang Modal Text dengan Jquery.
Hakekatnya banyak ya teman-teman plugin jquery mengenai modal/pop-up dan lain-lain. akan tetapi kita disini tak menggunakan plugin teman-teman, lalu kita bikin modalnya bagaimana ? oke tenang, dipembahasan kali ini lumayan menarik karena kali ini kita akan merancang sendiri modal tersebut tanpa plugin.
Bagaimanakah caranya ? oke baiklah seketika saja kita mulai mencoba Cara Merancang Modal Text dengan Jquery.
Langkah pertama-tama, seperti lazimnya 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>
Di script diatas kita telah merancang kerangka modalnya, lalu langkah berikutnya 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;
}
Bila telah 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 seluruh 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= hehe berjumpa kembali diwebsite Source Code Aplikasi ini dan di kesempatan kali ini saya akan me Cara Merancang Modal Text dengan Jquery title=Cara Merancang Modal Text dengan Jquery />
<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= hehe berjumpa kembali diwebsite Source Code Aplikasi ini dan di kesempatan kali ini saya akan me Cara Merancang Modal Text dengan Jquery title=Cara Merancang Modal Text dengan Jquery />
</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= hehe berjumpa kembali diwebsite Source Code Aplikasi ini dan di kesempatan kali ini saya akan me Cara Merancang Modal Text dengan Jquery title=Cara Merancang Modal Text dengan Jquery />
</body>
</html>
Bila telah seperti diatas silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Bila benar karenanya hasil dikala button di klik akan menjadi seperti di gambar dibawah ini
Wow, bagaimana teman-teman ? gampang kan. Nah kita telah berhasil pada merancang modal tanpa menggunakan pluging jquery sedikit pun. Jadi seperti diatas yakni contoh sederhana nya. Dan bagi pengembangannya silahkan teman-teman kembangkan sesuai selera teman-teman.
Oke kalau demikian itu lumayan hingga disini pembahasan kita mengenai Cara Merancang Modal Text dengan Jquery. Semoga dapat bermanfaat bikin teman-teman dan hingga bertemu dipembahasan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
