Açılır pencere kodu javascript kullanılmamıştır
lightbox tarzı java script olmadan css ile yapılmış açılır pencere kodudur. Java script olmadığı için sitenizin hız performansına olumlu yönde etki etmektedir yavaşlatmamaktadır.
Benzer kodlar bir çok sitede dağıtılmaktadır, ancak çoğunda java script kullanıldığı için, çoğu zaman ihtiyaç duyduğumuz bu ”açılır pencere kodu” nu kullanmaktan vazgeçmişizdir sebep ise sitemizi yavaşlatması. Bu kodda böyle bir sıkıntı yaşamayacaksınız hızlı bir şekilde yüklenecek ve sitenizi kasmayacak. Her siteye çok kolay bir şekilde entegre edilebilir. Kod içinde değiştirmeniz gereken yerler yazmaktadır.
<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>
Lütfen Örnek gösterirmisiniz. Ben kod içinde bazı ad değişimleri yaptıkça kod hata veriyor. hangisini değiştircemi kısa kod şeklinde gösterirsen sevinirim. dugme yerine dugme1 diyorum olmuyor anlamadım malesef
S.a ben bu kodu sitemde kullandım güzel faydalı oldu ama aynı sayfada aynı kodu 2 kez kullanamıyorum. Yani birisinin içine radyo diğerine tv kodu koydum açtığımda istediğim gibi olmuyor sadece radyo cıkıyor ve diğerinin ölçüleri oluşuyor. ama farklı sayfalara koysam sorun yok. Sormak istediğim nasıl acaba aynı sayfa içinde 2 açılır pencere koyabilirim ? yardımcı olursan sevinirim kardeşim.
Burada dikkat etmeniz gereken dugme adlı class dır değiştirerek farklı buton ve pencereler de oluşturulabilir.
S.a Çok faydalı bir kod işime yaradı ama aynı sayfaya 2 defa açılır pencere kodu koyduğumda içlerine farklı kod koyduğumda. örnek birine radyo dğerine tv kodu koydum hata verdi olmuyor. ayrı sayfalarda oluyor aynı sayfada olmuyor. Bu konuda lütfen yardımcı olurmusun kardeşim.