Membuat Popup Pure CSS

Membuat Popup Pure CSS

Membuat Popup Pure CSS

Jika kita biasanya menggunakan Javascript/JQuery untuk membuat Popup tapi untuk kali ini kita akan membuatnya hanya dengan CSS saja tanpa perlu bantuan dari Javascript meskipun dibantu oleh HTML sih 😂 . Popup sendiri bisa berguna sekali apabila ada info yang memang sangat diperlukan oleh pengunjung dari website/blog yang sering dikunjungi seperti info terkini maupun berupa hanya penggenalan saja.

Sebelum ke pembuatan saya harap kalian sudah menyiapkan bahan yang diperlukan apalagi bagi yang belum tahu. Berikut bahanya :

Text Editor = Bisa Sublime Text, Notepad ++, Visual Studio Code dll.
Browser
Niat
Kopi

Diatas adalah bahan yang kalian perlukan untuk membuat Popup.

Membuat Popup Pure CSS

Pertama buka Text Editor => kemudian copy kode dibawah ini dan paste

<html>
<head>
 <title>Pure CSS POPUP</title>
</head>
<body>

</body>
</html>

Kedua tambahkan kode dibawah ini tepat dibawah kode <body>

<div class='post-body'>
  <h1>Cara Membuat Popup Pure CSS</h1>
<div class="post-content content_1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
</br> </br>
<div class="box">
 <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
 <div class="popup">
  <h2>Here i am</h2>
  <a class="close" href="#">&times;</a>
  <div class="content">
   Thank to pop me out of that button, but now i'm done so you can close this window.
  </div>
 </div>
</div>
</br> </br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.</p>
</div>

Ketiga kita akan menambahkan css tepat diatas kode </head>

<style type="text/css">
.post-body a.img,.post-body .separator a{margin-left:0!important;margin-right:0!important}
body {
background: #ecf0f1;
background-size: 100%;
background-repeat: no-repeat;
font-family: 'Muli', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
body:before {
content: '';
position: fixed;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
}
.post-body {
max-width: 768px;
margin: 4% auto;
padding: 20px;
background: #fff;
color: #222;
font-size: 16px;
line-height: 1.6;
box-shadow:0 5px 5px 1px rgba(0,0,0,0.15)
}
.post-body h1,.post-body h2 {
display: block;
margin: 40px auto;
font-size: 1.7rem;
font-weight: 700;
color: #222;
text-align:center;
}
.container h2 {
margin-top: 30px;
}
.box {
  width: 40%;
  margin: 0 auto;
  padding: 35px;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #222;
  border: 2px solid #4b0082;
  border-radius: 60px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #4b0082;
  color: #fff;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
</style>

Terakhir bila sudah, simpan file tersebut dengan nama Popup.html

Bagi kalian yang ingin melihat tampilannya seperti apa bisa klik tombol dibawah ini :

Result

Alangkah lebih baiknya kalian diketikkan karena dapat menghapal kode diatas tapi jika malas apa boleh buat, saya hanya menyarankan saja kalian untuk mengetikkan daripada hanya sekedar copy paste dan merubah kode saja.

Comments

RianMarch 10, 2019 at 3:04 AM
test comment
ReplyDelete
Replies
SobaTechAugust 8, 2019 at 7:45 PM
kalau tanpa melakukan klik alias langsung muncul ketika blog di load gimana mas?
ReplyDelete
Replies

Post a Comment

To insert a code use <i rel="pre">code_here</i>To insert a quote use <b rel="quote">your_qoute</b>To insert a picture use <i rel="image">url_image_here</i>To insert a video use <i rel="video">video</i>Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan. Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim.