How To Create Pop-up window with CSS
oke kali ini saya akan memberikan tutorial membuat jendela popup dengan css , oke enggak pake lama-lama
1. pertama buka dreamweaver atau notepad anda , lalu KETIKAN script berikut ini :
*{
margin:0px;
padding:0px;
}
#button {
margin:5% auto;
width:100px;
text-align:center;
}
#button a{
background:orange;
width:80px;
color:#fff;
text-decoration:none;
padding:10px;
border:1px solid transparent;
border-radius:5px;
}
#popup{
background:rgba(0,0,0,.5);
position:fixed;
text-align:center;
width:100%;
height:100%;
top:0;
left:0;
z-index:9999;
visibility:hidden;
}
.jendela{
margin:15% auto;
background:#fff;
border-radius:10px;
padding:10px;
text-align:center;
width:200px;
height:100px;
position:relative;
text-align:center;
}
.close-button{
width:20px;
height:20px;
border-radius:10px;
text-align:center;
background:#000;
color:#fff;
display:block;
text-decoration:none;
border:3px solid #fff;
position:absolute;
top:-10px;
right:-10px;
}
#popup:target{visibilty:visible;}
Lalu save deangan nama popup.css , Kemudoin kita buat lagi lembar kerja baru lalu ketikan script berikut ini :D
<html>
<link href="popup.css" rel="styleshee" type="text/css">
<body>
<div id="button"><a href="#popup">Click Me</a></div>
<div id="popup">
<div class="jendela">
<a href="#" class="close-button" >X</a>
<h1>SELAMAT DATANG</h1>
</div>
</div>
</body>
</html>
Lalu save dengan nama popup.html , setelah itu jalankan file popup.html di web browser anda :D
1.
sebelum di click
setelah di click
selamat mencoba dan tunggu tutorial selanjutnya . Terima Kasih.
Belum ada Komentar untuk "How To Create Pop-up window with CSS"
Posting Komentar