Sayfa Yüklendiğinde Lightbox Formu Otomatik Olarak Açmak
Bir lightbox formunu, ilgili web sayfasının yüklenmesi tamamlandığında otomatik olarak açmak için, openOnLoad:true parametresini lightbox konfigürasyonuna eklemeniz yeterlidir.
Örnek:
<script src =”https://form.jotform.com/static/feedback2.js” type=”text/javascript”></script><script type=”text/javascript”>
var JFL_220443141302033 = new JotformFeedback({
formId: ‘220443141302033’,
base: ‘https://form.jotform.com/’,
windowTitle: ‘Form Başlığınız’,
background: ‘#FFA500’,
fontColor: ‘#FFFFFF’,
type: ‘false’,
height: 500,
width: 700,
openOnLoad: true
});
</script>
İlgili parametreyi eklemeden önce, son parametrenin (bu örnekte width) sonuna virgül koymayı lütfen unutmayın. Yukarıda gösterildiği gibi uygulamanız yeterli olacaktır.
Lightbox Formu İstenen Bir Zamanda Otomatik Olarak Açma
Sayfa yüklendikten sonra lightbox formun gösterimini tercihinize göre geciktirebilirsiniz.
- Lightbox yerleştirme kodunuzu alın.
- Lightbox yerleştirme kodunun içerisinde bulunan bağlantı etiketine bir id niteliği ekleyin.
Örneğin, aşağıdaki örnek kod için id=”lightboxdelay” etiketi kullanılmıştır:
<a id=”lightboxdelay” class=”lightbox-220443141302033″ style=”cursor:pointer;color:blue;text-decoration:underline;display:none;”>İletişim Formu</a>
Bağlantı linkini gizlemek için, yukarıdaki örnekte gösterildiği gibi, style niteliği içerisine display:none; değerini ekleyebilirsiniz.
- Daha sonra aşağıdaki scripti, lightbox yerleştirme kodunun altına ekleyin:
<script type=”text/javascript”>
var delayseconds = 5;
function pause(){
myTimer = setTimeout(‘whatToDo()’, delayseconds * 1000);
}
function whatToDo(){
document.getElementById(‘lightboxdelay‘).click();
}
window.onload = pause;
</script>
- 5 – Lightbox formun açılmasından önce 5 saniye bekleneceğini ifade eder. Bu değeri tercihinize göre değiştirebilirsiniz.
- lightboxdelay – İkinci adımda, lightbox form penceresini açan bağlantıya eklediğimiz id niteliğinin değeridir. İlgili id değerinin kendi kodunuzdaki ile aynı olmasına lütfen dikkat ediniz.
5 saniye gecikmesinin uygulandığı demo bağlantısına göz atın.
Lightbox Formu İstenen Bir Zamanda Otomatik Olarak Kapatma
- Lightbox yerleştirme kodunuzu alın.
- Aşağıdaki scripti, lightbox yerleştirme kodunun altına ekleyin:
<script type=”text/javascript”>
var delayseconds = 5;
window.onload = closeLightbox();
function closeLightbox() {
setTimeout(function(){
document.querySelector(‘.jt-dimmer’).click();
}, delayseconds*1000);
}
</script>
- Gecikme süresini delayseconds değişkeni üzerinden güncelleyebilirsiniz. 5 değeri lightbox 5 saniye sonra kapanacak demektir.
Önemli Not: window.onload metodu, bir web sayfası üzerinde birden çok kullanıldığında uyumsuzluklar doğurabilir ve eklenen kod çalışmayabilir. Bu durumda, window.onload metodu yerine prototype veya jQuery metodlarını kullanabilirsiniz.
İlgili Yazılar:
Yorum Gönder: