Javascriptsiz açılan bilgi mesajı

DÜNYADA BİR İLK! Javascriptsiz, sadece html ve css kullanarak oluşturulmuş bir açılır pencere(lightbox)! Hangi platformu, hangi site oluşturma aracını kullanıyorsanız kullanın, sitenizde kesinlikle çalışacak bir kod! Javascript içermediği için, web siteniz kesinlikle yavaşlamayacak!

Önizleme

Pencereyi Aç Kapat

Ekle

Yerleşim >Gadget ekle > HTML-Javascript yolunu izleyin  aşağıdaki script kodlarını yapıştırın.

<!--Yılmaz Uçar Sitene Ekle Kodlari START--><div id="pencerekodu"><label for="pencere" class="dugme"> Pencereyi Aç </label><input type="checkbox" class="Pencereac" id="pencere" name="pencere"></input><label class="pencere"> <!--Yılmaz Uçar Sitene Ekle Kodlari START--><a href="http://blogyilmaz.blogspot.com/" target="_blank"><img alt"Reklam" border="2" src="http://i.hizliresim.com/xGnm47.gif" body="Reklam Alanı" width="90" height="90" title="Blog Yilmaz"/></a><!--Yılmaz Uçar Sitene Ekle Kodlari Finish--> <label for="pencere" class="dugme" name="kapat">Kapat</label></label></div><style> .dugme{cursor:pointer;display:inline-block;padding:5px 10px;background:#eee;border:1px solid #d8d8d8;font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#444; -webkit-border-radius: 3px; border-radius: 3px; } [name="kapat"]{position:absolute;bottom:20px;right:20px;} .pencere{ position:fixed;top:-50%;left:-50%; width:380px;height:280px;background:#fff;box-shadow:0 0 6px 2px rgba(0,0,0,0.4); opacity:0; transition:opacity 0.6s ease-out; z-index:-1; padding:10px; -webkit-border-radius: 3px; border-radius: 3px; margin:-150px 0 0 -200px; } .Pencereac{width:1px;height:1px;visibility:hidden;} .Pencereac:checked + .pencere{ top:50%;left:50%; display:block; z-index:9; opacity:1;}</style>