Cum se creează o fereastră pop-up. PopUp - fereastră pop-up. Crearea și utilizarea ferestrelor pop-up. Dar experiența utilizatorului?
Fapt cunoscut: Majoritatea vizitatorilor nu fac o achiziție la prima vizită la pagina de produse a unui magazin online și nici măcar nu lasă un prospect - dar cât de mare este acea majoritate?
Potrivit cercetării companiei SeeWhy, acesta este cazul a 99% dintre vizitatorii care vizitează resursa pentru prima dată. Cu siguranță, despre care vorbimîn primul rând despre site-urile de comerț electronic, dar încă se pune întrebarea: dacă 99% dintre vizitatori nu cumpără nimic la prima vizită, atunci cum să-i încurajăm să revină?
Vestea bună este următoarea statistică: 75% dintre vizitatori sunt încă dispuși să revină mai târziu pentru a finaliza achiziția.
Indiferent de cum te simți cu privire la ferestrele pop-up, această tehnică de marketing este în continuare eficientă pentru a atrage atenția și pentru a colecta date de contact (generare de clienți potențiali).
Pur și simplu, utilizarea ferestrelor pop-up este cea mai rapidă modalitate de a întoarce vizitatorul la pagina de destinație.
De ce?
Aceasta implică o tehnică de persuasiune cunoscută sub denumirea de „întrerupere a modelului” - atunci când atenția ta, liniștită de un anumit ritm sau secvență narativă, este brusc atrasă agresiv de ceva neașteptat. Adesea, experimentați acest efect când vizionați filme, spectacole de comedie și chiar în timpul negocierilor importante.
Când vine vorba de marketing prin e-mail și conținut, „întreruperea modelului” este cea mai eficientă atunci când cititorul este deja angajat să rezolve problema și să continue interacțiunea (abonarea la newsletter, efectuarea unei achiziții etc.).
Un exemplu din serviciul Made.com. Marketerii le-au oferit vizitatorilor lor un voucher gratuit în valoare de 10 euro pentru o simplă adresă E-mail. Acest lucru a fost făcut pentru că:
Potrivit ExactTarget, e-mailul este cel mai preferat canal de marketing pentru consumatori, 77% dintre consumatori preferând e-mailul altor canale de interacțiune cu un brand.
Poate că ferestrele pop-up nu sunt atât de rele până la urmă?
Sunt șanse să urâți ferestrele pop-up și aveți dreptul să faceți acest lucru. Desigur, cine ar dori să vadă așa ceva imediat după ce a accesat pagina de destinație:
Sau asta:
Poate că nici nu știi despre domeniul de activitate al companiei, dar ești deja acoperit până la gât ferestre pop sus. Exemplele de mai sus nu reușesc: în primul rând, vizitatorul dorește să afle mai multe despre marcă, apoi să descarce „Ghidul gratuit pentru generarea de trafic”, „Free e-carte„, etc. Desigur, majoritatea utilizatorilor urăsc astfel de lucruri și răspund refuzând să interacționeze în continuare cu brandul.
Poate ar trebui să vă răcoriți puțin și să vă uitați la rezultatele testelor. Ce spun numerele? Iată datele dintr-un test divizat al unui pop-up și butonul „Nu, mulțumesc” dintr-o ofertă pop-up.
| Text | Numărul de vizualizări | Numărul de e-mailuri colectate | Rata de conversie |
| Nu, mulțumesc. Prefer să plătesc prețul întreg | 165 416 | 9928 | 6,0% |
| Nu ma intereseaza asta | 165 625 | 7961 | 4,81% |
| Nu, mulțumesc | 165 021 | 7616 | 4,62% |
| Nu | 166 072 | 7433 | 4,48% |
Impresionant? Apoi, să ne uităm la rezultatele companiilor care utilizează eficient această abordare.
1. Experiență cu ferestre pop-up
Într-o zi obișnuită, serviciul WP Beginner primește aproximativ 70-80 de abonați noi datorită diverse metode generarea de lead-uri. Dar cu cât baza de abonament este mai mare, cu atât afaceri mai de succes, așa că agenții de marketing ai serviciului au decis să experimenteze cu ferestre pop-up.
Ce sa făcut?
A fost dezvoltată o fereastră pop-up care apare atunci când utilizatorul intenționează să părăsească site-ul. Efectul a fost obținut datorită tehnologiilor de urmărire a cursorului și altor metode. Iată cum arăta fereastra:
Care sunt rezultatele?
Utilizarea unui pop-up pe paginile critice (nu pe întregul site) a crescut înscrierile cu 660%. Adică de la 70-80 de clienți potențiali serviciul a trecut la 445-470 de clienți potențiali pe zi - un salt la un nivel calitativ nou.
Următorul caz este de la Backlinko. După adăugarea unui CTA pe pagina de destinație cu o ofertă de abonare la newsletter, conversia a scăzut la 1,73% - ceva de făcut urgent. Specialiștii de marketing ai companiei au dezvoltat o fereastră pop-up care a apărut în fața utilizatorilor care au decis să părăsească pagina de destinație. Iată cum arăta:
Vă amintiți că rata de conversie a fost de aproximativ 1,7% înainte de a utiliza fereastra pop-up? La 2 zile de la lansarea pop-up-ului, statisticile s-au schimbat. În doar două zile, rata de conversie a crescut de la 1,73% la 4,83% - de peste 2 ori!
Desigur, într-o lume în care un test competent poate crește conversia cu 100, 300%, chiar 1300%, rezultatele acestui experiment par modeste. Cu toate acestea, acest lucru nu este chiar adevărat.
În primul rând, cu o bază mare de abonați, agenții de marketing pot crea conținut relevant pentru publicul lor și pot crea un sistem de vânzare încrucișată. Astfel, luând în considerare vânzările suplimentare și alți factori, un contact aduce serviciului o medie de 15 USD.
Dacă ferestrele pop-up aduc 15 abonați suplimentari pe zi, atunci venitul zilnic va crește cu o medie de 225 USD, iar venitul anual cu 82.125 USD, respectiv. Nu este un venit rău pentru 2 minute de verificare a setărilor, nu?
În mod clar, cei care urăsc ferestrele pop-up au greșit. Dar există și alți factori: rata de respingere și impactul ferestrelor pop-up asupra experienței utilizatorului. Ce zici de asta?
2. Cum afectează ferestrele pop-up experiența utilizatorului și rata de respingere?
Unul dintre primele gânduri când menționezi un pop-up este creșterea numărului de eșecuri, deoarece tot mai mulți oameni vor părăsi pagina de destinație din vina ferestrei pop-up, ceea ce este absolut logic. Cu toate acestea, amintiți-vă de exemplele de mai sus: marketerii WP începători nu au văzut ezitarea acest indicator, precum și Backlinko - numărul de eșecuri nu s-a schimbat în ambele cazuri.
Dan Zarrella a ajuns la aceeași concluzie după ce a făcut o serie de teste pe personalul său pagina de destinație, constatând că prezența unei ferestre pop-up nu a avut niciun efect asupra ratei de respingere. Singurul lucru care s-a schimbat este că, prin eliminarea ferestrelor pop-up, Dan a pierdut 50% din clienții potențiali primiti.
3. Ce zici experiența utilizatorului?
Aparent, vizitatorilor nu le pasă. Specialiştii în marketing WP Beginner nu au primit nicio plângere cu privire la ferestrele pop-up de la clienţii lor.
Dacă te gândești bine, acest lucru are sens. Da, este neplăcut să vezi așa ceva după ce mergi la o resursă folosind un link de la Facebook:
Dar acesta nu este un motiv pentru a părăsi site-ul cu furie. În ce faci de obicei cazuri similare? Așa este - închideți fereastra pop-up și continuați să căutați conținutul dorit.
Mai mult, utilizarea corectă a ferestrelor pop-up poate îmbunătăți experiența utilizatorului, urmând exemplul serviciului Vero. Dacă accesați pagina principală și nu efectuați nicio acțiune în 30 de secunde, veți vedea o casetă în colț cu textul: „Ce vă împiedică să vă înscrieți la Vero chiar acum?”
4. Cum să distrugi gradul de utilizare cu ferestre pop-up?
Cu toate acestea, nu puteți încorpora niciun anunț pop-up în pagina dvs. de destinație și nu puteți spera conversie mare. Dacă o fereastră pop-up nu iese în evidență pe pagină, atunci este cel puțin inutilă.
Ești pe cale să părăsești pagina de destinație și apoi... Bam! S-a întâmplat ceva ciudat, unde a apărut butonul CTA în mijlocul paginii? În realitate, această fereastră pop-up a fost suprapusă pe o pagină neîntunecată, amestecându-se în fundal. Când nu separați ferestrele pop-up de restul paginii, chiar strică experiența utilizatorului.
După cum se dovedește, mulți specialiști în marketing greșesc în privința ferestrelor pop-up - se dovedește că încă funcționează. Acum veți învăța cum să utilizați ferestrele pop-up pe pagina de destinație pentru a obține un efect maxim.
5. Creați ferestre pop-up eficiente
Înainte de a începe să creăm ferestre pop-up, să ne uităm la principalele lor tipuri. Există două tipuri majore de ferestre pop-up:
Suprapuneri
Arata ca exemplul de mai sus. Astfel de ferestre ascund întregul ecran, întunecând fundalul. Fereastra pop-up rămâne singurul element de pe pagină care este clar vizibil pentru utilizator - în În ultima vreme A existat o tendință de a utiliza ferestre pop-up cu acest format special.
Cunoscutul marketer Dan Zarella folosește și suprapuneri pentru întunecarea fundalului, dar fereastra în sine este mult mai mică decât de obicei:
Ferestre care apar ca urmare a derulării paginii
Acest tip de ferestre pop-up apare atunci când utilizatorul derulează la un anumit punct al paginii - cel mai adesea acest format folosit in bloguri si este extrem de eficient. După ce parcurgeți la jumătatea paginii, veți vedea ceva de genul acesta:
În funcție de software-ul sau pluginul pe care îl utilizați, puteți experimenta cu adâncimea derulării - cât de departe trebuie să meargă utilizatorul pentru a vedea fereastra pop-up. În plus, puteți seta aspectul ferestrelor pop-up în funcție de timpul petrecut de utilizator pe site.
Aceleași cerințe se aplică titlurilor, textelor câmpurilor și butoanelor din ferestrele pop-up ca și conținutului din CTA. La urma urmei, ferestrele pop-up sunt elemente ale unui apel la acțiune, al cărui scop este de a crește vizionările/abonații/clienții.
6. Cel mai bun timp pentru a afișa ferestre pop-up
Dacă vorbim de testarea suprapunerilor, serviciul SumoMe a colectat următoarele date: până în prezent timp optim este la 5 secunde după ce vizitatorul merge la pagina de destinație.
WhichTestWon oferă statistici diferite. În timpul testelor, aspectul suprapunerilor a fost verificat la 15, 30 și 45 de secunde după aterizarea utilizatorului, iar rezultatul optim a fost arătat de prima opțiune: aspectul ferestrei după 15 secunde cu 11% varianta mai eficienta cu 30 de secunde, iar la 50% - opțiunea cu 45 de secunde după aterizare.
Dar amintiți-vă - nu există un moment ideal pentru a apărea o fereastră, deoarece testele sunt necesare în fiecare caz specific. Acest lucru este valabil și pentru întrebarea frecvenței ferestrelor pop-up. Mai simplu spus, statisticile din resursele altora te pot motiva să-ți faci propriile teste, dar nu ar trebui să fie un obiect de imitație - test.
Cum să faci o fereastră pop-up este o întrebare care bântuie mintea oricărui programator începător. Și astăzi ne vom uita la cum să facem această fereastră pop-up. Mă voi avansa puțin, pentru că ceea ce vom face va fi cu adevărat foarte, foarte interesant și funcțional.
Deci, vom crea o fereastră similară pe care am implementat-o pe site-ul unuia dintre clienții mei. Puteți arunca o privire. Uriașul avantaj al acestei metode de a crea o astfel de fereastră este că nu vom folosi JavaScript, ci ne vom limita exclusiv la CSS3 și HTML5 preferatele mele. Astfel vom ucide mai multe păsări dintr-o singură lovitură. În primul rând, vom face mai ușoară încărcarea site-ului nostru și, în al doilea rând, vom implementa totul într-o formă convenabilă și ușoară, cu utilizarea minimă a codului, ceea ce vă va permite să oferiți independent ferestrei pop-up orice dimensiune, culoare, formă. Cred că e minunat. Asadar, haideti sa începem.
Imaginați-vă că aveți deja un site web și doriți să implementați un buton undeva, de exemplu, „înregistrare” sau „ Aplicație online" Și doriți ca utilizatorul să facă clic pe acest buton pentru a vedea o fereastră mică care îi permite să introducă unele date în ea și apoi să le trimită administratorului site-ului. Aceasta este fereastra pe care o vom face acum.
Pentru început, vom crea acest buton, cred că îl puteți face fără prea multe dificultăți. Dar în etichetă Trebuie să introduceți următorul #openModal . Asa ar trebui sa arate pentru tine. Apoi, înainte de eticheta de închidere scrie codul de mai jos. Vă rugăm să rețineți că vom folosi cursuri pentru decorare și id pentru a apela fereastra. Urmând această regulă, putem crea nenumărate ferestre pop-up diferite.
X Fereastra pop-up
Această fereastră a fost creată de unul dintre cei mai mulți moduri simple. Nimic personal, totul este simplu :)
Acum trebuie să proiectăm totul frumos și să ne asigurăm că totul funcționează așa cum ar trebui. Să începem să decoram.
DecorModalDialog ( poziție: fix; font-family: Arial, Helvetica, sans-serif; sus: 0; dreapta: 0; jos: 0; stânga: 0; fundal: rgba(0,0,0,0.8); z-index : 99999 -webkit-transition: opacitate 400ms ease-in: opacitate 400ms ease-in;
ModalDialog( poziție: fixă; familie de fonturi: Arial, Helvetica, sans-serif; sus: 0; dreapta: 0; jos: 0; stânga: 0; fundal: rgba(0, 0, 0, 0,8); indicele z: 99999; Webkit - tranziție: opacitate 400 ms ease-in; Moz - tranziție: opacitate 400 ms ease-in; tranziție: opacitate 400ms ușurință - în; afișaj: niciunul; pointer - evenimente : niciuna ; |
Codul de mai sus este simplu ca naiba. Dar pentru orice eventualitate, din moment ce știu că blogul meu este citit de destul de mulți nou-veniți, voi analiza eventualele dificultăți. Pentru ca fereastra să fie mereu într-un singur loc, i-am dat o poziție fixă. De asemenea, pentru ca fereastra să se întindă pe tot ecranul, am setat coordonatele colțurilor la punctul 0. Pentru fundal culoarea este setată la negru și se adaugă transparență, obținând astfel întuneric în jurul fereastra modală. Pentru a vă asigura că fereastra este deasupra restului elementelor paginii, setați-o la mare indicele z. Pentru apariția lină și dispariția ferestrei noastre modale preferate și va deveni așa, crede-mă, tranziție. Pentru a ascunde fereastra trebuie să setați afişa V nici unul. Proprietate pointer-evenimente vă permite să controlați interactivitatea (clickability) elementelor.
Deschiderea unei ferestre pop-upNe-am decorat fereastra. Dar! Spune-mi tu, nu funcționează. Da, răspund, așa este. Pentru că acum vine partea interesantă. CSS3 a introdus o pseudo-clasă ţintă, un lucru cu adevărat util, orice ai spune. Și în fereastra noastră pop-up modală nu există absolut nicio cale fără ea. Ce face? Această pseudo-clasă, dacă este specificată cu un element care este definit în bara de adresa ca id, în cazul nostru este #openModal. Apoi, proprietățile acestei pseudoclase vor deveni mai importante decât cele ale elementului țintă. Cred că ai înțeles deja ce vreau să fac.
ModalDialog:țintă ( display: block; pointer-events: auto; ) .modalDialog > div ( lățime: 400px; poziție: relativă; margine: 10% automat; padding: 5px 20px 13px 20px; chenar-radius: 10px; fundal: # fff; fundal: -moz-linear-gradient(#fff, #999); -webkit-linear-gradient(#fff, #999); )
ModalDialog: target( afisare: bloc; pointer-evenimente: auto; ModalDialog > div ( latime: 400px; poziție: relativă; marja: 10% auto; umplutură: 5px 20px 13px 20px; chenar - raza : 10px ; fundal: #fff; fundal : - moz - liniar - gradient (#fff, #999); fundal: - webkit - liniar - gradient (#fff, #999); fundal : - o - liniar - gradient (#fff, #999); |
Pseudo-clasa ţintă setează DISPLAY la BLOCK și astfel apare fereastra. Proprietatea POINTER-EVENTS controlează activitatea legăturii.
Proprietățile DIV setează lățimea ferestrei, poziția acesteia pe ecran și umplutura pentru a plasa fereastra în centrul paginii. Proprietățile rămase stabilesc marginile din interiorul paginii, rotunjirea colțurilor și fundalul ferestrei cu degrade de la alb la gri închis.
Când designul ferestrei este setat și se deschide, trebuie să faceți un buton pentru a închide fereastra - proiectați-o și implementați funcționalitatea. Utilizarea CSS3 și HTML5 vă permite să creați butoane personalizate elegante fără a utiliza imagini:
Închidere ( fundal: #606061; culoare: #FFFFFF; înălțimea liniei: 25px; poziție: absolut; dreapta: -12px; text-align: center; sus: -10px; lățime: 24px; text-decor: niciunul; font- greutate: -webkit-border-radius: 12px-box-shadow: 1px 3px #000; :hover ( fundal: #00d9ff; )
Închide( fundal: #606061; |
O casetă PopUP este un anunț pop-up conceput pentru a atrage trafic web sau pentru a colecta adrese de e-mail. Astfel de elemente sunt adesea forme de publicitate pe Internet pe WorldWideWeb. De obicei, acestea sunt ferestre noi care se deschid într-un browser web pentru a afișa reclame. De obicei, acestea sunt generate de JavaScript folosind cross-site scripting (XSS), uneori cu o sarcină utilă secundară și folosind AdobeFlash.
O variantă a PopUP sunt anunțuri pop-up care se deschid într-o nouă fereastră de browser ascunsă în cea activă.
Istoria originiiPrimele reclame pop-up au apărut pe Tripod.com la sfârșitul anilor 1990. Ethan Zuckerman susține că a scris codul pentru a rula reclame în ferestre individuale, ca răspuns la plângerile despre anunțurile banner. Ulterior, dezvoltatorul și-a cerut scuze în mod repetat pentru inconvenientul pe care a început să-l provoace invenția sa.
Opera a fost primul browser major care a inclus instrumente de blocare a ferestrelor pop-up. Browser Mozilla ulterior a îmbunătățit aceste dezvoltări, începând să blocheze fereastra PopUP generată la încărcarea paginii. La începutul anilor 2000, toate browserele web majore, cu excepția Internet Explorer, a permis utilizatorului să elimine aproape complet anunțurile pop-up nedorite. În 2004, Microsoft a lansat Windows XP SP2, care a adăugat blocarea acestui browser.
Majoritate browsere moderne vin cu instrumente de protecție pop-up. Instrumente de la terți includ de obicei alte funcții, cum ar fi filtrarea anunțurilor.
Ferestre pop-upUnele tipuri de conținut descărcabil sunt imagini, muzica gratisși altele - pot provoca ferestre pop-up. În plus, acestea arată uneori ca pagini web normale, iar numele site-ului va apărea în bara de căutare. Multe resurse folosesc ferestre pop-up pentru a afișa informații fără a întrerupe ceea ce este deschis în prezent. acest moment pagină. De exemplu, dacă ați completat un formular pe o pagină web și aveți nevoie de mai multe îndrumări, fereastra PopUP vă va oferi Informații suplimentare fără a provoca pierderea oricăror date deja introduse în formular. Majoritatea aplicațiilor de blocare a reclamelor pop-up permit acest tip de descărcare.
Dar rețineți că unii instalatori web, cum ar fi cei utilizați de McAfee, folosesc o fereastră pop-up pentru a instala software-ul. Pe multe browsere de internet, apăsând Tastele Ctrl Făcând clic pe link, se va ocoli filtrul.
În acest caz, făcând clic (chiar accidental) pe o fereastră pop-up poate duce la deschiderea altora.
Ocoliți blocarea ferestrelor pop-upCombinaţie banner publicitar iar o fereastră pop-up este un „anunț de trecere cu mouse-ul” care utilizează DHTML pentru a se afișa pe ecran în partea de sus a conținutului paginii. CU folosind JavaScript anunțul poate fi suprapus în partea de sus a paginii web în strat transparent. Această reclamă poate apărea în aproape toate cazurile în care agentul de publicitate dorește. Un astfel de script de fereastră PopUP nu poate fi observat în avans. De exemplu, o reclamă poate conține o animație AdobeFlash legată de site-ul agentului de publicitate. De asemenea, poate arăta ca o fereastră obișnuită. Deoarece reclama face parte din pagina web, nu poate fi blocată folosind un blocator, dar poate fi împiedicată să se deschidă folosind aplicații terță parte(cum ar fi AdBlock și AdblockPlus) sau folosind foi de stil personalizate.
Acest anunț este similar cu o fereastră PopUP obișnuită, dar apare ascuns în spatele ferestrei principale a browserului, în loc să apară în fața acesteia. Când s-au răspândit și au preluat reclamele pop-up tot ecranul computer, mulți utilizatori au învățat să le închidă imediat, fără să se uite. De aceea a apărut PopUNDER, care nu interferează cu vizualizarea de către utilizator a conținutului site-ului. De obicei, acestea rămân nedetectate până când fereastra principală a browserului este închisă sau minimizată. Cercetările au arătat că utilizatorii răspund mai bine la aceste reclame decât reclamele pop-up, deoarece nu par ca fiind intruzive.
ÎN publicitate sunt implicate două foarte simple Funcții JavaScript, introdus în 1997 cu browserul Netscape 2.0B3. Această metodologie este utilizată pe scară largă pe Internet. Editorii web și agenții de publicitate moderni îl folosesc pentru a crea o fereastră în fața conținutului paginii, pentru a încărca un anunț și apoi pentru a-l trimite în spatele ecranului.
Majoritatea browserelor moderne permit deschiderea pop-up-ului numai atunci când există o anumită interacțiune a utilizatorului (cum ar fi un clic de mouse). Orice apeluri neinteractive ( sună din nou timer, încărcarea evenimentelor etc.) va duce la blocarea noii ferestre. Pentru a evita această limitare, majoritatea anunțurilor pop-up sunt declanșate folosind un ascultător de evenimente mouse atașat direct la document sau corpul documentului. Acest lucru vă permite să capturați toate clicurile de mouse pe pagină care nu au fost folosite de alți gestionatori de evenimente. De exemplu, atunci când utilizatorul selectează text, clicul mouse-ului este detectat de un ascultător atașat documentului. Aceasta va deschide o fereastră pop-up folosind codul de mai sus.
Utilizatorii diferitelor site-uri web și aplicații web întâmpină în mod constant ferestre pop-up nedorite atunci când folosesc browserul. De obicei, o astfel de fereastră PopUP este eliminată folosind funcția „închidere” sau „anulare”. Deoarece acesta este un răspuns tipic al utilizatorului, dezvoltatorii au început să folosească câteva trucuri. Deci, la dezvoltare mesaje publicitare sunt create butoanele de pe ecran sau controale similare cu o opțiune „închidere” sau „anulare”. Cu toate acestea, atunci când utilizatorul selectează una dintre aceste opțiuni, butonul efectuează o acțiune neașteptată sau neautorizată (de exemplu, deschiderea unei noi ferestre pop-up sau descărcarea unui fișier nedorit în sistemul utilizatorului).
Deoarece tehnologiile de web design permit autorilor să folosească orice formă de „fals”, unii utilizatori refuză să facă clic sau să interacționeze cu orice element din interiorul unei ferestre pop-up.
Uneori, adresele URL sunt redirecționate către pagini de publicitate folosind funcția de redirecționare URL de fundal. Acestea se deschid uneori într-o filă nouă, iar apoi conținutul vechii file de fundal este înlocuit cu pagini de publicitate folosind o redirecționare. AdblockPlus, uBlock sau NoScript nu pot bloca aceste redirecționări pop-up. Această caracteristică este folosită din ce în ce mai mult de către distribuitorii de publicitate în căutarea unei modalități de a face fereastra PopUP cea mai activă.
Cum să scapi de ferestre pop-upCum să eliminați reclamele din browser? În primul rând, verificați dacă există actualizări. Menținerea la zi a browserului va contribui în mare măsură la combaterea ferestrelor pop-up. Majoritatea browserelor sunt setate să se actualizeze automat, dar aceasta poate fi dezactivată. Acest proces durează de obicei doar câteva minute.
- Firefox: faceți clic pe butonul cu numele aplicației în colțul din stânga sus. Treceți mouse-ul peste Ajutor și selectați Despre Firefox. Aceasta va deschide o fereastră cu informații despre versiunea browserului. Dacă browserul dvs. nu descarcă și instalează automat.
- Chrome: faceți clic pe butonul de meniu din dreapta colțul de sus. Selectați „Despre Chrome” în partea de jos, se va deschide inserție nouă, iar browserul va verifica dacă există actualizări. Dacă există, acestea vor fi instalate automat.
- Internet Explorer: metoda de actualizare depinde de versiunea browserului pe care o utilizați. Pentru opțiunile mai vechi, va trebui să vă conectați la Centru Actualizări Windows. Pentru Internet Explorer 10 și 11, puteți activa actualizari automate făcând clic pe pictograma roată și selectând Despre Internet Explorer.
Uneori, o fereastră PopUP pentru un site web și altele asemenea softwareîncorporat prea adânc pentru a fi eliminat prin actualizare. În astfel de cazuri, reinstalarea sau schimbarea browserului dvs. web poate ajuta la rezolvarea problemei.
Prima descărcare ultima versiune browserul pe care doriți să îl utilizați. Puteți găsi link-uri de descărcare la pagina principala fiecare aplicație.
Astăzi vom vorbi despre cum să vă creați propria fereastră pop-up pentru site-ul dvs. web. Acum aceasta metoda este foarte popular, dar majoritatea soluțiilor pentru implementarea sa sunt plătite. Un exemplu de fereastră nu foarte frumoasă (dar acesta este doar un exemplu) în interiorul unei postări...
În această postare vom învăța cum să facem o fereastră pop-up ca aceasta. Simplu, rapid, eficient și, cel mai important, gratuit!
Orice fereastră pop-up constă în esență din două părți. Primul este întunecarea fundalului general. Al doilea este fereastra în sine. Fereastra, la rândul său, este de obicei împărțită într-un titlu, text și un formular de abonare. Să pregătim baza pentru fereastra noastră, ținând cont de structura specificată.
Avem:
fs_popup_bg — Întunecarea site-ului;
fs_popup — Fereastra în sine;
fs_popup_head — Titlul ferestrei;
fs_content — Conținutul ferestrei, împărțit în două părți;
Acum să scriem stilurile necesare...
#fs_popup_bg ( z-index:9999; stânga:0; sus:0; poziție:fix; lățime:100%; înălțime:100%; fundal:rgba(0,0,0,0.9); ) #fs_popup (marja: 10% 20%;
Să aruncăm o privire rapidă asupra stilurilor ferestrei noastre pop-up.
#fs_popup_bg- indică faptul că fundalul nostru va fi negru și aproape opac (0.9), va fi situat în colțul din stânga sus și va ocupa întreaga zonă a ecranului. În acest caz, adâncimea elementului, sau mai degrabă elevația lui deasupra altor elemente, va fi foarte mare (cu siguranță mai mare decât altele).
#fs_popup- indică faptul că fereastra va fi la un nivel deasupra fundalului (altfel nu am vedea-o). Dimensiunile sale vor fi 600px cu 300px colturi rotunjiteși un cadru roșu.
.fs_content_left, .fs_content_right- ne spune că blocurile sunt apăsate spre stânga (necesare pentru amplasarea lor la același nivel), au indentări și fontul Arial.
Să ne umplem fereastra cu conținut:
ÎnchideÎn această postare vom învăța cum să facem o fereastră pop-up ca aceasta. Simplu, rapid, eficient și, cel mai important, gratuit! Grăbește-te, introduceți e-mailul și obțineți o grămadă de Informatii utile!*
Email-ul tau:
* - Acest câmp nu este activ. Făcând clic pe butonul „Abonare” sunteți de acord cu utilizarea adresei dumneavoastră în scopuri de corespondență în masă materiale promoționale. Și mai lăsați moștenire mașina, apartamentul și 10% din venit autorului site-ului.
Și să adăugăm stilurile noastre pentru un afișaj mai frumos:
#fs_popup_bg ( z-index:9999999999998; stânga:0; sus:0; poziție:fix; lățime:100%; înălțime:100%; fundal:rgba(0,0,0,0.9); ) #fs_popup (marja: 10% 20%; z-index:99999999999: 600px bord: 1px 10px 10px; text-decoration: subliniere; .fs_popup_head a:hover (cursor: pointer; text-decoration: niciunul; ) .fs_content_left, .fs_content_right (float: stânga; padding: 5px: font-size: 20px; font-family; ) .fs_content_left ( lățime: 370px; culoare: #FFF; dimensiunea fontului: 17px; line-height: 17px; font-family: Arial; ) .fs_content_right ( lățime: 200px; culoare: #FFFF00; ) .fs_content_content -size: 7px; line-height: 7px; ) .fs_content_right input (marja: 5px; lățime: 190px; culoare: #000 ; ) .fs_ok (bord: 1px solid #FF0000; chenar-rază: 10px; înălțime: 35px; fundal: #FFFF00; cursor: pointer; culoare: #000; )
Asta e practic tot. După cum se vede din Exemplu JavaScript pentru o fereastră pop-up, este necesară în esență în două cazuri:
1) Evenimentul de închidere a ferestrei noastre;
2) Eveniment pentru clic pe butonul „Abonare”;
De asemenea, nu ar strica să verificați dacă această fereastră a fost afișată acest calculator. Lucrul cu cookie-uri este destul de potrivit pentru aceste scopuri.
3. Exemplu de fereastră jQuery modală apelată dintr-un link (din Demo)
Cel mai probabil, ați văzut deja o fereastră pop-up modală pe Internet de mai multe ori - confirmarea înregistrării, avertisment, informații de referință, descărcare de fișiere și multe altele. În acest tutorial voi oferi câteva exemple despre cum să creați cele mai simple ferestre modale.
Crearea unei ferestre modale pop-up simple Să începem să ne uităm la cod pentru o fereastră modală simplă care va apărea imediatcod jQuery
$(document).gata(funcție()
{
alert("Text în fereastra pop-up");
});
Lipiți codul oriunde în corpul paginii dvs. Imediat după încărcarea paginii, fără nicio comandă, veți vedea o fereastră care arată astfel:
Dar următorul cod va fi executat după ce întreaga pagină este încărcată în browser. În exemplul nostru, după încărcarea paginii cu imagini, va apărea o fereastră pop-up simplă:
$(window).load(funcție()
{
alert("Încărcarea paginii s-a încheiat!)");
});
Puteți vedea adesea că formularele de autentificare și înregistrare se află în astfel de ferestre. Sa trecem la treaba
Mai întâi, să scriem partea html. Plasăm acest cod în corpul documentului dvs.
Apelarea unei ferestre modale
Textul ferestrei modal
Închide
Text într-o fereastră modală.
Cod CSS. Fie în fișier css separat, sau în cap.
corp(
font-family:verdana;
dimensiunea fontului: 15px;
}
.link (culoare:#fff; text-decoration:none)
.link:hover (culoare:#fff; text-decoration:subliniere)
#masca (
poziție: absolut;
stânga:0;
sus:0;
indicele z: 9000;
culoare de fundal:#000;
afișaj: niciunul;
}
#boxes.window (
poziție: absolut;
stânga:0;
sus:0px;
-sus: 40px;
lățime: 440px;
înălțime: 200px;
afișaj: niciunul;
indicele z: 9999;
umplutură: 20px;
preaplin: ascuns;
}
#casete #dialog (
lățime: 375px;
înălțime: 203px;
umplutură: 10px;
culoare de fundal:#ffffff;
}
.top(
poziție: absolut;
stânga:0;
sus:0;
lățime: 370px;
înălțime: 30px;
fundal: #0085cc;
umplutură: 8px 20px 6px 10px;
}
.închide(
float:dreapta;
}
.conţinut(
padding-top: 35px;
}
ÎN cod jQuery Să ne concentrăm pe poziția ferestrei modale și a măștii, în cazul nostru întunecarea treptată a fundalului.
Atenţie! Nu uitați să includeți biblioteca în capul documentului!
Conectarea bibliotecii de pe site-ul web Google. Ei bine, codul jQuery în sine.
cod jQuery
$(document).ready(funcție() (
$("a").click(funcție(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mască").css(("lățime":Lățimea măștii,"înălțimea":Înălțimea măștii));
$("#masca").fadeIn(1000);
$("#masca").fadeTo("lent",0.8);
var winH = $(fereastră).înălțime();
var winW = $(fereastră).width();
$(id).css("sus", winH/2-$(id).height()/2);
$(id).css("stânga", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(funcția (e) (
e.preventDefault();
$("#masca, .window").hide();
});
$("#masca").click(funcție () (
$(aceasta).hide();
$(".window").hide();
});
});
