Membuat Modal dengan JQuery
JQuery menurut wikipedia yaitu pustaka JavaScript lintas-platform yang didesain bagi menyederhanakan client-side scripting di HTML. JQuery adalah sebuah pustaka JavaScript yang sangat populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery itu cuma-cuma, dan bersifat kode sumber terbuka dibawah lisensi MIT. Dan kali ini kita akan Membangun Modal dengan JQuery. yuk kita praktekan.
bikin file index.html dan bikin struktur HTML berikut, kita memakai tema vootswatch yah teman teman dan menggunakan JQuery jadi kita mesti menghubungkan nya.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title> Membangun Modal dengan JQuery </title>
<link rel =stylesheet href =https://bootswatch.com/4/cosmo/bootstrap.min.css>
</head>
<body>
<div class=container>
<div class=row>
<div class=col-12>
<button class=btn btn-outline-secondary id=tombol>Open Modal</button>
<div class=modal>
<div class=modal-dialog >
<div class=modal-content>
<div class=modal-header>
<h5 class=modal-title>Judul Modal</h5>
<button type=button class=close exit data-dismiss=modal aria-label=Close>
<span aria-hidden=true>×</span>
</button>
</div>
<div class=modal-body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, corrupti, eum! Esse, nostrum repudiandae. Modi labore cum, quos aliquid unde accusamus tempore, quibusdam necessitatibus alias ut fuga dolorum officiis est?</p>
</div>
<div class=modal-footer>
<button type=button class=btn btn-secondary exit data-dismiss=modal>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
berikut tampilannya,
jadi sekarang ini kita punya tombol Open Modal dan modalnya.
setelah itu tambah kan style internal yang isinya bagi menyembunyikan modal yang tadi kita bikin berikut contoh gambarnya.
lalu setelah itu kita sambungkan JQuerynya.
ketikan kode sebelum tag penutup Body
<script src=”http://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
script di atas guna nya bagi menyambungkan html kita dengan jquery.
lalu kita bikin script jquery bagi membangun modalnya. berikut kodenya
<script>
$(document).ready(function(){
$(‘#tombol’).click(function(){
$(‘.modal’).css(‘display’,’block’);
$(‘body’).addClass(‘bg-dark’);
$(‘#tombol’).addClass(‘disable’);
$(‘#tombol’).css(‘display’,’none’);
});
$(‘.exit’).click(function(){
$(‘.modal’).css(‘display’,’none’);
$(‘#tombol’).css(‘display’,’block’);
$(‘body’).removeClass(‘bg-dark’)
})
});
</script>
atau lihat gambar berikut
nah setelah itu kita coba program yang baru kita bikin.
ketika tombol open modal di klik karenanya modal akan mucul dan tombol open modal akan menghilang, dan background body akan menjadi berwarna dark.
dan ketika tombol close atau x di klik karenanya modal akan menghilang dan background akan kembali normal berwarna default atau putih.
nah gampang bukan Membangun Modal dengan JQuery, semoga artikel Membangun Modal dengan JQuery ini bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
