popup pada web untuk manmpilkan jendela seperti di atas ini biasanya menggunakan pemrograman jquery, tetapi pada pembahasan kali ini hanya menggunakan html dan css. popup ini biasanya di gunakan memberikan info awal atau pun form login dan lain lain.
pertama siapkan file html/tag html nya.
<html>
<head>
<title>popup</title>
<body>
<div id="popup">
<div class="t-popup">
<a href="index.html" class="close-btn">X</a>
<h1>POPUP</h1>
</div>
</div>
<a href="#popup" class="btn-popup">CLICK TO SHOW POPUP</a>
</body>
</html>
<head>
<title>popup</title>
<body>
<div id="popup">
<div class="t-popup">
<a href="index.html" class="close-btn">X</a>
<h1>POPUP</h1>
</div>
</div>
<a href="#popup" class="btn-popup">CLICK TO SHOW POPUP</a>
</body>
</html>
Keterangan :
<div id="popup">
<div class="t-popup">
<a href="index.html" class="close-btn">X</a>
<h1>POPUP</h1>
</div>
</div>
tag di atas berguna untuk tampilan jendela popup nya.
lalu, pada tag " <a href="#popup" class="btn-popup">CLICK TO SHOW POPUP</a>" ini berguna untuk menuju link popup nya agar tampil.
Baca juga : Cara membuat Lingkaran dengan HTML dan CSS
sekarang kita buat file css nya, sisipkan kode css nya pada html :
<html>
<head>
<title>popup</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
.btn-popup{
padding:10px 20px;
font-size:14px;
background-color:#496F7E;
color:#ffffff;
text-decoration:none;
}
#popup{
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);
position:fixed;
visibility:hidden;
}
.t-popup{
width:500px;
height:400px;
background-color:#ffffff;
padding:20px;
margin:100px auto;
text-align: center;
}
.close-btn{
text-decoration:none;
font-size:20px;
width:20px;
height:20px;
padding:10px;
position:absolute;
color:#000000;
background-color:#DDE2E4;
border:2px solid #000000;
margin:10px 0px 0px 200px;
border-radius:40px;
}
#popup:target{
visibility:visible;
}
</style>
<body>
<div id="popup">
<div class="t-popup">
<a href="index.html" class="close-btn">X</a>
<h1>POPUP</h1>
</div>
</div>
<a href="#popup" class="btn-popup">CLICK TO SHOW POPUP</a>
</body>
</html>
Keterangan :<head>
<title>popup</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
.btn-popup{
padding:10px 20px;
font-size:14px;
background-color:#496F7E;
color:#ffffff;
text-decoration:none;
}
#popup{
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);
position:fixed;
visibility:hidden;
}
.t-popup{
width:500px;
height:400px;
background-color:#ffffff;
padding:20px;
margin:100px auto;
text-align: center;
}
.close-btn{
text-decoration:none;
font-size:20px;
width:20px;
height:20px;
padding:10px;
position:absolute;
color:#000000;
background-color:#DDE2E4;
border:2px solid #000000;
margin:10px 0px 0px 200px;
border-radius:40px;
}
#popup:target{
visibility:visible;
}
</style>
<body>
<div id="popup">
<div class="t-popup">
<a href="index.html" class="close-btn">X</a>
<h1>POPUP</h1>
</div>
</div>
<a href="#popup" class="btn-popup">CLICK TO SHOW POPUP</a>
</body>
</html>
pada kode css pada id "#popup" di isikan "visibility: hidden;" ini gunanya agar tidak terlihat tampilannya.
lalu pada "#popup:target" disikan "visibility:visible;" ini gunanya pada saat menuju link "#popup" maka popup akan tampil.
dan terakhir untuk desain web nya disesuaikan masing masing atau sesuka hati anda~.
0 comments:
Post a Comment