Kali ini akan membuat jendela popup, dima jika kita mengkli suatu tombol atau link maka akan muncul jendela diwebsite tersebut bukan mengarah ke halaman lain,
Dibawah ini adalah script html nya :
<html>
<head>
title>Mmbuat Jendela POPUP</title>
</head>
<body>
<div class="button"><a href="#latar_popup">POP UP</a></div>
<div id="latar_popup">
<div class="jendela">
<p style="font-family:Verdana, Geneva, sans-serif; font-weight:bold; border-bottom:1px solid #ccc;">INI ADALAH JENDELA POPUP <a href="#" class="close">X</a></p>
<p> </p>
<p>KLIK Tanda X di pojok kiri atas</p>
</div>
</div>
</body>
</html>
Untuk script css nya dibawah ini :
<style type="text/css">
body {
padding:0px;
margin:0px;
}
.button {
text-align:center;
margin:50px auto;
}
.button a {
margin:50px auto;
border-radius: 5px;
padding:5px 15px;
background:-webkit-linear-gradient(top, #0F3, #0C3);
color:#FFFFFF;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
}
#latar_popup {
width:100%;
height:100%;
background:rgba(0, 0, 0, .4);
position:fixed;
z-index:999;
visibility:hidden;
top:0px;
left:0px;
}
.jendela {
width:200px;
text-align:center;
position:relative;
margin:10% auto;
background:#FFFFFF;
padding:20px;
border:1px solid #ccc;
border-radius:5px;
}
.close {
font-family:Verdana, Geneva, sans-serif;
width:30px;
height:30px;
text-align:center;
background:#000000;
border:3px solid #FFF;
border-radius:50%;
color:#FFFFFF;
font-weight:bold;
top:-10px;
text-decoration:none;
right:-10px;
padding:2%;
position:absolute;
}
#latar_popup:target {
visibility:visible;
}
</style>
body {
padding:0px;
margin:0px;
}
.button {
text-align:center;
margin:50px auto;
}
.button a {
margin:50px auto;
border-radius: 5px;
padding:5px 15px;
background:-webkit-linear-gradient(top, #0F3, #0C3);
color:#FFFFFF;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
}
#latar_popup {
width:100%;
height:100%;
background:rgba(0, 0, 0, .4);
position:fixed;
z-index:999;
visibility:hidden;
top:0px;
left:0px;
}
.jendela {
width:200px;
text-align:center;
position:relative;
margin:10% auto;
background:#FFFFFF;
padding:20px;
border:1px solid #ccc;
border-radius:5px;
}
.close {
font-family:Verdana, Geneva, sans-serif;
width:30px;
height:30px;
text-align:center;
background:#000000;
border:3px solid #FFF;
border-radius:50%;
color:#FFFFFF;
font-weight:bold;
top:-10px;
text-decoration:none;
right:-10px;
padding:2%;
position:absolute;
}
#latar_popup:target {
visibility:visible;
}
</style>
#latar_popup adalah link jendela popup nya, jadi dalam hal ini kita jadi id pada <div>, pada #latar_popup {visibility:hidden;} artinya jika tombol popup belum di kli maka jendela popup belum muncul,
pada #latar_popup:target{visibility:visible;} artinya jika tombol
Hasil nya seperti di bawah ini
.png)
.png)
.png)
0 komentar:
Posting Komentar