Membuat Popup Sederhana dengan CSS

Diposting pada
Belajar pemrograman itu sangat menyenangkan, pada artikel ini akan dijelaskan Bagaimana sih membuat tampilan popup dengan CSS? mudah kawan hanya cukup sedikit belajar CSS

karena dengan belajar dan memahami itu kita mampu membuat interface atau desain yang minimalis dan menarik. langsung saja ke pokok bahasan, membuat pop-up :

Pertama, buka editor tools yang anda pakai.
Kedua, copy source code CSS dibawah ini, simpan dengan nama style-pop.css

* {
margin: 0;
padding: 0;
}
#button {
margin: 5% auto;
width: 100px;
text-align: center;
}
#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
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: 50%;
height: auto;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}
.close-button {
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;
}
#popup:target {
visibility: visible;
}

Keterangan :
#popup : itu blok bagian yang mengatur popoup
#window : itu bagian css yang mengatur besar, kecil (width/height) jendela popup

ketiga, buatlah halaman index.html

<!DOCTYPE html>
<html>
<head>
<title>Pop Up sederhana dengan CSS</title>
<link rel=”stylesheet” href=”style-pop.css” type=”text/css” />
</head>
<body>
<div id=”button”><a href=”#popup”>Tampilkan Pop Up</a></div>
<div id=”popup”>
<div class=”window”>
<a href=”#” class=”close-button” title=”Close”>X</a>
<h1>Jendela Pop Up</h1>
<p>Hello CSS….<br>
Saya sedang belajar CSS<br><br><br>
fieyanh.blogspot.com</p>
</div>
</div>
</body>
</html>

Hasil nanti seperti ini :

ketika menjalankan index.html

Tampilan index.html

 ketika klik Tampilkan Pop Up

Tampilan hasil Jendela Popup CSS

Selamat mencoba..Semoga bermanfaat.

Salam Blogger..!
fieyanh.blogspot.com

Gambar Gravatar
Blogger dan Programmer | andhika.na@gmail.com

0 thoughts on “Membuat Popup Sederhana dengan CSS

  1. Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di http://www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Untuk Info lebih lanjut silahkan menghubungi kami melalui :

    Pin BB : 2B3C34F4
    YM : Aslibandar_CS
    Skype : AsliBandar
    Telp : +855882388666
    FB : AsliBandar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *