Cara Membuat Jendela Popup dengan CSS3

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan memberikan tutorial atau tips tentang Cara Membuat Jendela Popup dengan CSS3. Sebelum kita mulai membuatnya saya akan memberikan penjelasan singkat mengenai jendela popup biar teman-teman mempunyai gambaran awalnya. jadi Jendela Pop-up adalah jendela yang biasanya muncul secara tiba-tiba atau saat kita mengklik sebuah button saat mengunjungi sebuah halaman web. Biasanya dalam sebuah website jendela popup diisi dengan iklan.

Oke untuk lebih mudah teman-teman dalam memahaminya, mari kita mulai Cara Membuat Jendela Popup dengan CSS3. Pertama-tama silahkan teman-teman jalankan/run text-editor yang teman-teman gunakan, kemudian ketik/copy script HTML dibawah ini :

<!DOCTYPE html>
<html>
	<head>
		<title>Jendela Popup dengan CSS3</title>
	</head>
	<body>
		<div class="button"><a href="#popup">Click Me</a></div>
		
		<div id="popup">
			<div class="window">
				<a href="#" class="close-button" title="Close">X</a>
				<h1>Jendela Popup Sederhana</h1>
				<p>Dumetschool</p>
			</div>
		</div>
	</body>
</html>

Untuk script HTMLnya sudah, langkah selanjutnya silahkan teman-teman tambahkan lagi script CSSnya seperti dibawah ini :

* {
margin: 0;
padding: 0;
}

body, html {
font-family: Calibri, "times new roman", sans-serif;
color: #1abc9c;
}

.button {
margin: 50px auto;
width: 100px;
text-align: center;
}

.button a {
background-color: #2e9fd2;
width: 86px;
height: 30px;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 150px auto;
}

.close-button {
width: 20px;
height: 20px;
background: #f1c40f;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

#popup:target {
visibility: visible;
}

Jika script HTML dan CSS nya sudah, langkah selanjutnya silahkan teman-teman jalankan ke browser yang teman-teman gunakan, jika scriptnya sudah benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Oke teman-teman, cukup mudah bukan ? jadi seperti itulah contoh nyata dari jendela popup, dan untuk pengembangannya silahkan teman-teman modif sendiri sesuai selera teman-teman.

Cukup sekian pembahasan kali ini tentang Cara Membuat Jendela Popup dengan CSS3. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Membuat Jendela Popup dengan CSS3

Kategori