Membuat Modal dengan JQuery

JQuery menurut wikipedia adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. JQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery itu gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT. Dan kali ini kita akan Membuat Modal dengan JQuery. yuk kita praktekan.

buat file index.html dan buat struktur HTML berikut, kita memakai tema vootswatch yah teman teman dan menggunakan JQuery jadi kita harus menghubungkan nya.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Membuat 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 kita punya tombol Open Modal dan modalnya.

setelah itu tambah kan style internal yang isinya untuk menyembunyikan modal yang tadi kita buat 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 untuk menyambungkan html kita dengan jquery.

lalu kita buat script jquery untuk membuat 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 aplikasi yang baru kita buat.

ketika tombol open modal di klik maka modal akan mucul dan tombol open modal akan menghilang, dan background body akan menjadi berwarna dark.

dan ketika tombol close atau x di klik maka modal akan menghilang dan background akan kembali normal berwarna default atau putih.

nah mudah bukan Membuat Modal dengan JQuery, semoga artikel Membuat Modal dengan JQuery ini bermanfaat yah teman teman.