Javascriptsiz Açılır Pencere Kodu

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!

Gadget ekleme yöntemi ile sitenizde kullanabilirsiniz konu tamamı ile alıntıdır.

KODLAR:

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

Kod içerisinde gerekli yerleri kendinize göre değiştirin.

Posted in: Eklentiler