TEKRAR HOŞGELDİN!
Yaklaşık 5 dakikadır blogumdasın sanırım yazılarım ilgini çekti. Yeni yazılarımdan ilk sen haberdar olmak istiyorsan aşağıda ki sosyal hesaplarımı takip edebilir veya haftalık e-posta bültenime kay olabilirsin!
Web ve mobil için tasarım ve yazılım çözümleri sunabilirim.
Ziyaretçiler İçin E-Posta Modal'ı

Ziyaretçiler İçin E-Posta Modal'ı

Herkese merhaba bugün sitem için bir e-posta popup'ı geliştirdim ve şimdi bunun nasıl yapılacağını anlatacağım.

Derse başlamadan önce Şimdi işin javascript ve mantık kısmını anlatacağım. Önce bu modal'ın kaç dakika da açılmasını istiyorsak onu belirtiyoruz. var modalShowMinute = 1; Daha sonra emailModal daha önce tanımlanmış mı bunu kontrol ediyoruz. Eğer tanımlanmamışsa, tanımlıyoruz ve bir sonraki sayfa yüklemesinde gösterebileceğni belirtiyoruz. Tanımlanmışsa da yukarıda dakika cinsinden belirttiğimiz modal gösterim süresini hesaplatıp bir değişkene atıyoruz. var modalShowTime = modalShowMinute * 60; Daha sonra ziyaretçimiz kaç saniyedir sitede bulunuyor bunu saniye saniye sayan ve sayfa yeniden yüklense bile bunu kaybetmeyecek bir değişkene ihtiyacımız var bu kısımda yardımımıza localStorage yetişiyor. Şimdi eğer bu değişken tanımlı değilse değerini 0 olarak belirtip tanımlıyoruz. Tanımlıysa da timer yani zamanlayıcımızı saniye de bir kez tekrarlayacak şekilde başlatıp ziyaretçinin sitede bulunduğu süre bizim belirttiğimiz süreye eşit veya büyük mü bunu kontrol ediyoruz. Tüm belirttiğimiz şartlar sağlandığında e-posta modalımızı gösteriyoruz, tekrar gösterilmemesi için emailModal değişkeninin değerini false olarak belirtiyoruz ve zamanlayıcımızı siliyoruz. Ve son detaylar modal'ın kapat butonuna tıklandığında, tekrar gösterip ziyaretçiyi sıkmamak için emailModal'ın değerini false olarak belirtiyoruz. $('.modal button.close').on('click', function(){ $('.modal-overlay').removeClass('show'); localStorage.emailModal = false; }); Modalın içerisindeki form gönderildiğinde gerekli değerleri alıp post işlemini yapıyoruz. $('.modal form').on('submit', function(e){ var fullname = $(this).find('input[name=fullname]').val(), email = $(this).find('input[name=email]').val(); / Ajax İşlemleri / e.preventDefault(); }); Bütün yapmanız gereken işlemler bu kadar e-posta modalınız hayırlı olsun. Umarım atladığım bir yer yoktur. Demo için buraya tıklayın.. İndirmek için buraya tıklayın.

ETİKETLER

info_outline Bu yazı 28.01.2017 21:33 tarihinde, 11 ay önce Genel kategorisinde yayınlandı.