Membuat Popup dengan HTML, CSS3, dan JQuery Tanpa Plugin

Membuat Popup dengan HTML, CSS3, dan JQuery Tanpa Plugin


Salam, wuff, alhamdulillah ilmuwebsite kembali menjadi sesuatu yang diharapkan kembali di dunia web development, tentunya dalam memberikan edukasi untuk para pemula khusus di dunia web development, dan web design. Meski terkadang disini kami pun memberikan tutorial seperti Desain Grafis, Arsitektur Interior, FotoGrafi, Jaringan komputer, dll.

Pengen Belajar Web Development HTML CSS JQuery Javascript Codeigniter Lebih Lengkap, Mudah, dan Lebih Terstruktur?

Pake Modul Video Tutorial Interaktif Mudah Jelas Gamblang, Nggak Pakai Ribet, Kenapa Video? Kalo Ebook Atau Buku Tebelnya minta ampun Gan. Mumpung Ada Promo, Beli Sekarang Dah Gan!! Promo Tutorial Premium Mahir Web Development Bangun 5 Project Website + Mahir Membuat 4 Aplikasi Android + Bonus Tutorial Membuat Themes Wordpress Premium, 3 Tutorial Isi 5 Dvd Cuma Rp 150rb Aja Gan (harga normal Rp 296rb) !!! Terbatas Sampe 12 Februari 2020 (Yang Bikin Videonya Udah Pengalaman Di Web Development Lebih Dari 15 Tahun Gan!!) (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)


Baiklah mari kita masuk ke dalam topik utama, kali ini akan kita mempelajari kembali studi kasus bagaimana membuat popup.

Apakah itu popup. Dari pada saya menjelaskan sangat jauh, lebih baik Anda lihat sendiri contohnya adalah seperti ini.
popup

Ketika Anda memasuki website biasanya kadang terdapat/muncul popup seperti ini, atau ketika Anda ber-facebook-an pun seringkali menemukan popup dalam facebook. Nah, namun bagaimana caranya membuat popup ?

Sebagian besar web designer lebh memilih menggunakan plugin jquery, ketimbang membuat sendiri, padahal sebetulnya ketika meracik sendiri itu jauh lebih ringan, dan kodenya juga jauh lebih efisien, dan tidak banyak barisan kode yang terbuang percuma tidak terpakai. Namun bagaimana sih cara membuat popup?

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

 

Pertama-tama kita buat terlebih dahulu HTML kosongnya.

<!DOCTYPE>
<html>
<head>

</head>
<body>

</body>
</html>

 

Lalu kita persiapkan agar halaman tersebut bisa mengeksekusi jquery.

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
	});
</script>
</head>
<body>

</body>
</html>

 

Selanjutnya adalah menyiapkan terlebih dahulu, elemen html yang dibutuhkan untuk tampil ketika halaman di load, yakni si popup itu sendiri.

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
	});
</script>
</head>
<body>
	<!-- bagian popup -->
	<div class="popup">
		<div id="box">
			<a class="close" href="#">X</a>
		</div>		
	</div>
	<!-- akhir dari popup -->
	
	<h1>Judul Artikel</h1>
	<p>ini artikelnya</p>
</body>
</html>

 

Kemudian script css stylenya, bagian penting :

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
	});
</script>
<style type="text/css">
	body{
		width:100%;
		height:100%;
		margin:0;
		padding:0;
	}
	div.popup{
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:100%;
		background: rgba(0,0,0,.8);
	}
	
	div#box{
		margin:5% auto;
		background:#fff;
		width:50%;
		height:50%;
		-webkit-box-shadow:0 0 15px #000;
		-moz-box-shadow:0 0 15px #000;
		box-shadow:0 0 15px #000;
	}
	
	a.close{
		text-decoration:none;
		color:#000;
		margin:10px 15px 0 0;
		float:right;
		font-family:tahoma;
		font-size:20px;
	}
</style>
</head>
<body>
	<!-- bagian popup -->
	<div class="popup">
		<div id="box">
			<a class="close" href="#">X</a>
		</div>		
	</div>
	<!-- akhir dari popup -->
	
	<h1>Judul Artikel</h1>
	<p>ini artikelnya</p>
</body>
</html>

 

Perhatikan potongan kode di bawah

	div.popup{
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:100%;
		background: rgba(0,0,0,.8);
	}

Ini memiliki arti bahwa div.popup itu memiliki position fixed, ketika browser scrollbar di gulung dia akan tetap pada posisinya, kemudian width 100% dan height 100% membuat dia memenuhi browser, di perkuat dengan top bottom left right 0. Jadilah ia popup.

Lalu bagaimana menutup popupnya ? Caranya adalah dengan jquery event click. Kode lengkapnya untuk tutorial ini adalah :

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('a.close').click(function(eve){
			
			eve.preventDefault();
			$(this).parents('div.popup').fadeOut('slow');
		});
	});
</script>
<style type="text/css">
	body{
		width:100%;
		height:100%;
		margin:0;
		padding:0;
	}
	div.popup{
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:100%;
		background: rgba(0,0,0,.8);
	}
	
	div#box{
		margin:5% auto;
		background:#fff;
		width:50%;
		height:50%;
		-webkit-box-shadow:0 0 15px #000;
		-moz-box-shadow:0 0 15px #000;
		box-shadow:0 0 15px #000;
	}
	
	a.close{
		text-decoration:none;
		color:#000;
		margin:10px 15px 0 0;
		float:right;
		font-family:tahoma;
		font-size:20px;
	}
</style>
</head>
<body>
	<!-- bagian popup -->
	<div class="popup">
		<div id="box">
			<a class="close" href="#">X</a>
		</div>		
	</div>
	<!-- akhir dari popup -->
	
	<h1>Judul Artikel</h1>
	<p>ini artikelnya</p>
</body>
</html>

 

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

Sekian Tutorial JQuery Kasus Bagaimana Membuat Popup. Selamat Mencoba

Artikel Terkait :