Membuat Jendela Popup atau Overlay

Kita tahu bahwa javascript menyediakan popup bexes diantaranya alert, confirm dan prompt, tapi masalahnya kita ingin membuat sendiri agar designnya sesuai dengan apa yang kita inginkan, tenang sobat kali ini kita akan membuat jendela popup atau overlay menggunakan HTML dan CSS, wah banyak amat ya itu syaratnya. Tenang- tenang jangan panic :D. mari  kita buat:

Langkah pertama, silahkan buat file dengan nama index.php dan ketikan code seperti dibawah ini:

<html>
	<head>
		<title>popup || overlay by madelhaq</title>
	</head>
	<body>
		<div id="wrapper">
			<a href="#popup">munculkan popup</a>
		</div>
		<div id="popup">
			<div class="notif-popup">
				<a href="#" class="close">x</a> 
				<p> hai ini adalah jendela popup yang telah saya bikin, keren kan ? </p>
			</div>
		</div>
	</body>
</html>

 

Save file tersebut. Maka hasilnya akan seperti gambar 1

gambar 1

Gambar 1

Nah loh masa gitu sih tampilannya? Hahaha tenang sobat kita belum tambahkan CSS nya. Sekarang mari kita buat file dengan nama style.css dan ketikan code di bawah ini:

*{
	margin:0;
	padding:0;
}
body{
	background: #f8fbf4;
	font-size:14px;
}
#wrapper{
	margin:0 auto;
	width:105px;
	height:200px;
}
#wrapper a{
	background-color:white;
	border:1px dashed black;
	text-decoration:none;
}

#wrapper a:hover{
	background-color:lightblue;
}
#popup{
	width: 100%;
	height: 100%;
	position: fixed;
	padding:20px 0 0 0 ;
	background: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	z-index: 9999;
	visibility:hidden;
	
}
#popup:target{
	visibility:visible;
}
.notif-popup{
	width: 350px;
	background: #fff;
	border-radius: 10px;
	position: relative;
	padding: 10px;
	box-shadow: 0 0px 10px rgba(0,0,0,.4);
	margin: 6% auto;
}
.notif-popup p{
	text-align:center;
	font-size:14px;
}
.close {
	width: 20px;
	height: 20px;
	background: #000;
	border-radius: 50%;
	border: 3px solid #fff;
	display: block;
	text-align: center;
	color: #fff;
	text-decoration: none;
	position: absolute;
	top: -10px;
	right: -10px;
}

Save file dan refresh halaman index.php yang tadi kita buat. Apa yang terjadi? Pasti tidak akan terjadi apa apa :p. itu karena kita belum menyertakan style.css pada file htmlnya. Ketikan code berikut di dalam <head> … </head>

<link href="style.css" rel="stylesheet" type="text/css">


<link href=”style.css” rel=”styleesheet” type=”text/css”>

Maka hasilnya akan seperti gambar 2

gambar 2

gambar 2

Dan jika munculkan popup di klik maka akan muncul popup seperti gambar 3

gambar 3

 

gambar 3

Semoga bermanfaat. Terimakasih 😀

 

 

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s