Javascriptsiz Açılır Pencere Eklentisi

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! 







<!--Koddostu Javascriptsiz Açılır Pencere Kodu STOP-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<div id="pencerekodu"><label for="pencere" class="dugme">
Pencereyi Aç
</label><input type="checkbox" class="Pencereac" id="pencere" name="pencere"></input><label class="pencere">
Pencere İçeriğini Bu Alana Yazabilirsiniz.

<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>

<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<!--Koddostu Javascriptsiz Açılır Pencere Kodu START-->

1 yorum:

Çok Kullanışlı Bir Eklenti Teşekkürler

Yorum Gönder

Not: Yalnızca bu blogun üyesi yorum gönderebilir.