Popup pentru site

O fereastră pop-up este una dintre cele mai eficiente metode de a crea o listă de utilizatori de e-mail. Fereastra va apărea atunci când utilizatorul deschide pagina site-ului și va conține un formular web pe care pur și simplu nu-l poate ignora (de exemplu promite ceva de descărcat gratuit).

Avantajul acestei abordări:

  1. Efectul este enorm.
  2. Reclamații de la el, nu suficient.

Fereastra pop-up jQuery

Pentru a crea o fereastră pop-up, multe dintre acestea utilizează programe terță parte, de exemplu opțiunea Monster opt-in. LeadPages. sau o listă de plug-in-uri Builder de la SumoMe. Aceste aplicații sunt convenabile, dar de ce folosesc programele terță parte dacă majoritatea CMS-urilor. jQuery este setarea implicită.

Dacă utilizați o aplicație terță parte pentru o fereastră pop-up, aflați cum să creați cu ușurință o fereastră pop-up folosind această bibliotecă jQuery. Poate că o fereastră pop-up care utilizează jQuery pe site-ul dvs. va funcționa mai bine.

Conectați jQuery

Dacă CMS nu conține biblioteca jQuery implicită, o puteți descărca și o puteți conecta la pagină. Dar este mai ușor să adăugați un link la biblioteca jQuery.

Apoi, trebuie să conectați două pluginuri jQuery la pagină:

Primul plugin, Modal plugin. o vom folosi pentru a crea o fereastră pop-up care apare după ce utilizatorul vizitează site-ul. Când adăugați un plug-in la proiect, asigurați-vă că toate fișierele sunt descărcate:

  • jquery.modal.min.js
  • jquery.modal.css
  • close.png
  • spinner.gif

O fereastră pop-up poate fi făcută folosind alte plugin-uri modale, dar această opțiune este cea mai ușoară.

Al doilea plugin de care aveți nevoie este cookie-ul jQuery. Vom aplica acest lucru utilizatorilor care au făcut clic pe butonul "închide" din fereastra pop-up. și nu a văzut o fereastră pop-up timp de o lună.

Aceasta înseamnă că:

  1. Toată lumea ar trebui să vadă fereastra pop-up cel puțin o dată.
  2. De fiecare dată când reveniți pe site, vizitatorii nu văd o fereastră pop-up.

Acest lucru se face folosind Cookie-ul și funcționează destul de bine.

După conectarea jQuery cu pluginurile, trebuie să creați un fișier HTML care arată astfel:

Creați o fereastră pop-up

Între etichete . introduceți următoarele:

Acesta este codul pentru fereastra pop-up, fereastra va apărea după ce utilizatorul deschide pagina. Cu acest cod, forma ferestrei pop-up nu este luminată, dar nu contează.

Merită să clarificăm câteva lucruri:

  1. O fereastră pop-up trebuie să aibă un ID unic. În acest exemplu, am folosit "opn-win".
  2. Proprietatea stilului este setată să afișeze "none". că fereastra pop-up nu va fi afișată în interfața principală.

Straight înainte . trebuie să adăugați o funcție care va fi executată o singură dată când deschideți pagina:

Pentru ca fereastra pop-up să apară când se încarcă pagina, trebuie să adăugați o funcție care este furnizată de pluginul jQuery:

Dacă totul se face corect, atunci după actualizarea paginii în browser, ar trebui să apară o fereastră pop-up ca în imaginea de mai jos:

Popup pentru site
Fereastră pop-up când se încarcă pagina

Dacă este necesar, o puteți face astfel încât fereastra să nu apară imediat. Este mai bine atunci când există o mică întârziere după ce utilizatorul deschide pagina site-ului. Pentru aceasta, adăugați funcția setTimeout.

Primul argument este funcția care este executată, în cazul nostru fereastra pop-up, iar al doilea parametru este întârzierea (în milisecunde).

Întreaga funcție va arăta astfel:

Gestionarea cookie-urilor

Apoi, în interiorul acestei noi funcții, creăm un cookie.

Cookie-ul numit hideTheModal este setat la true. De asemenea, putem specifica în parametrul expiră cât timp va fi stocat cookie-ul.

Dacă înlocuiți valoarea parametrului expiră cu 1 - o fereastră pop-up o dată pe zi, 7 - o fereastră pop-up o dată pe săptămână.

Permiteți-mi să vă reamintesc că Google Chrome nu acceptă module cookie pentru fișiere locale. Aceasta înseamnă că va trebui să verificați funcționalitatea cookie-ului dintr-un alt browser.

Prin urmare, este mai bine să adăugați următoarea condiție:

În context, codul ar trebui să arate astfel:

concluzie

Postări interesante

Articole similare

Pagina anterioară

Pagina următoare