Pure CSS Popup Box

Membuat konten untuk blog / situs web Anda juga akan membutuhkan keterampilan menulis yang baik. Tergantung pada keterampilan apa yang Anda miliki, mungkin merupakan ide yang baik untuk berkolaborasi dengan orang lain yang memilki minat yang sama dengan keahlian yang berbeda.

---

Tutorial Blog: Cara Membuat Popup Box Pure CSS

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

.oposition {
  text-align: center;
}
.obutton {
  font-size: 1em;
  padding: 10px;
  color: #000;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.obutton:hover {
  color:#000;
  background: #06D85F;
}

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

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

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

@media screen and (max-width: 700px){
  .obox{
    width: 70%;
  }
  .opopup{
    width: 70%;
  }
}

Simpan Tema

Untuk menampilkan hasilnya, tambahkan kode HTML berikut ini pada postingan bagian Compose HTML

<div class="oposition">
<a class="obutton" href="#popup1">Let me Pop up</a></div>
<div id="popup1" class="ooverlay">
<div class="opopup">
<h2>
Here i am</h2>
<a class="oclose" href="#">&times;</a>
<div class="ocontent">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>

   DEMO