membuat pop up mengunakan css
pada artikel kali ini adalah cara bagai mana membuat pop up mengunakan css tanpa mengunakan js
.pulang sekolah refresing belajar css ,karna css lebih asik dibanding yang lain
langsung saja langkah yang pertama
kita buat dulu satu file bernama popup.html
yang bewarna biru adalah kode html
<head>
//tempat css//
</head>
<div class="tombol-popup">
<a href="#popup">Klik disini</a>
</div>
<!--Jendela PopUp Disini-->
<div id="popup">
<div class="jelndela-popup">
<a href="" class="close">x</a>
<h1>Hello World</h1>
<p>anda berhasil membuat pop up ,terus llah belajar by nusakom</p>
</div>
</div>
//tempat css//
</head>
<div class="tombol-popup">
<a href="#popup">Klik disini</a>
</div>
<!--Jendela PopUp Disini-->
<div id="popup">
<div class="jelndela-popup">
<a href="" class="close">x</a>
<h1>Hello World</h1>
<p>anda berhasil membuat pop up ,terus llah belajar by nusakom</p>
</div>
</div>
dan yang berwarna hijau adalah css
<style>
html {
font-family:calibri;
}
h1 {
margin:0px;
}
#popup {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}
.jelndela-popup {
position:relative;
padding:15px;
background:#fff;
width:500px;
margin:15% auto 0;
border-top:5px solid #96C;
}
.close {
position:absolute;
right:15px;
top:10px;
color:#96c;
text-decoration:none;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
padding:5px 10px;
background:#eee;
}
.tombol-popup{
width:200px;
text-align:center;
margin:15% auto 0;
border-radius:5px;
color:#fff;
text-decoration:none;
background:#96C;
overflow:hidden;
box-shadow:0px 0px 5px #000;
}
.tombol-popup a{
padding:20px;
display:block;
font-size:20px;
color:#fff;
text-decoration:none;
}
#popup:target {
display:block;
}
</style>
html {
font-family:calibri;
}
h1 {
margin:0px;
}
#popup {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}
.jelndela-popup {
position:relative;
padding:15px;
background:#fff;
width:500px;
margin:15% auto 0;
border-top:5px solid #96C;
}
.close {
position:absolute;
right:15px;
top:10px;
color:#96c;
text-decoration:none;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
padding:5px 10px;
background:#eee;
}
.tombol-popup{
width:200px;
text-align:center;
margin:15% auto 0;
border-radius:5px;
color:#fff;
text-decoration:none;
background:#96C;
overflow:hidden;
box-shadow:0px 0px 5px #000;
}
.tombol-popup a{
padding:20px;
display:block;
font-size:20px;
color:#fff;
text-decoration:none;
}
#popup:target {
display:block;
}
</style>
setelah itu masukan kode css diatas ke
file html saya buat dengan nama nn.html
setelah itu input kan code css nya di antara head
lalu kita coba dengan membukanya di browser kita
maka akan muncul seperti ini
sekian itu saja semoga bermanfaat untuk saya nanti atau orang lain
Belum ada Komentar untuk "membuat pop up mengunakan css"
Posting Komentar