◄ Min  Size Fonts: + | - | ± Color: Max ►

Make PopUp Pure use CSS

Berbagai macam definisi popup, begitupun di dalam dunia CSS mempunyai popup tersendiri! AA akan share bagaimana cara membuat pop-up full murni 100% menggunakan bahasa CSS. Pop-up bergaya full open ketika melakukan klik. Berikut beberapa gaya yg sudah gue post:Aku buatkan 3 variasi termasuk default, untuk tampilan tagging PRE dan display image. Ukuran height and width area sudah dipatok dengan nominal tertentu agar terlihat keseragaman :D Sudah barang tentu sobat dapat kreasikan lagi dengan kode-kode lain agar tampak full stylish b-)

.wrappop {
width:35%;
padding:0;
margin:10px auto;
display:block;
}
.area {
border:#555 1px solid;
text-align: left;
height:250px;
overflow-y:auto;
font-size:10px;
}
.area img {
width:100%;
height:100%;
display:block;
margin:0;
}
.area pre {
padding:0 5px;
font-family:Consolas,"Courier New",Courier,monospace;
}
.popup {
display:none;
}
.popup:checked ~ .area {
top:0;
bottom:0;
left:0;
right:0;
color:#ddd;
padding:10px;
font-size:14px;
position:fixed;
box-sizing:border-box;
height:calc(100% - 0px);
background:rgba(0,0,0,.9);
}
<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   --- ADD CONTENT HERE ---
  </div>
</label>
Itu merupakan cara penulisan HTML default display! Sedangkan untuk penulisan syntax gambar sbb
<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <img src="LINK IMAGE" alt="" />
  </div>
</label>
Terakhir penulisan tagging PRE.
<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <pre>
   
   --- ADD CODE HERE ---
   
   </pre>
  </div>
</label>
Demo codepen.io/beben-koben/full/Ipwsc

Others:
www.script-tutorials.com/css3-modal-popups
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3

See you \m/
Loading...
XMake PopUp Pure use CSS
Membuat pop-up simpel hanya dengan menggunakan kode CSS
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE