Ce este fereastra pop-up. Fereastra pop-up pe HTML și CSS

Astăzi vom vorbi despre cum să vă creați fereastra pop-up pentru site-ul dvs. Acum, această metodă este foarte populară, cu toate acestea, cele mai multe soluții pentru implementarea sa sunt plătite. Un exemplu nu este o fereastră foarte frumoasă (dar acesta este doar un exemplu) în interiorul înregistrării ...

În această intrare, vom învăța să facem această fereastră pop-up. Simplu, rapid, eficient și cel mai important gratuit!

Orice fereastră pop-up în esență este formată din două părți. Primul este diminuarea fundalului comun. Al doilea este fereastra în sine. Fereastra la rândul său este, de obicei, împărțită în poziția de poziție, text și subscriere. Să pregătim baza de date pentru fereastra noastră, având în vedere structura specificată.

Avem:
fs_popup_bg. - întreruperea site-ului;
fS_POPUP. - fereastra însăși;
fs_popup_head. - titlul ferestrei;
fs_content. - conținutul ferestrei, împărțit în două părți;

Acum dăm stilurile necesare ...

Noi fugim stilurile ferestrei noastre pop-up.
#fs_popup_bg. - sugerează că fundalul nostru va fi negru și aproape nu transparent (0.9) va fi localizat în partea stângă colțul superior Și să ia întreaga zonă de ecran. În acest caz, adâncimea elementului și, mai exact, elevația sa față de alte elemente va fi foarte mare (cu bună știință mai mare decât altele).
#fs_popup. - sugerează că fereastra va fi la nivelul fundalului (altfel nu l-am vedea). Dimensiunile sale vor fi de 600px pe 300px cu colțuri rotunjite și un cadru roșu.
.fs_content_left, .fs_content_right. - ne spune că blocurile sunt presate în stânga (trebuie să localizați la un nivel), au liniuțe și fonturi ariale.

Completați fereastra de conținut:

Și stilurile noastre vor adăuga, pentru un afișaj mai frumos:

Iată principiul și asta este. După cum se poate observa din exemplul JavaScript pentru popup, fereastra este în esență necesară în două cazuri:
1) eveniment care închide fereastra noastră;
2) un eveniment făcând clic pe butonul "Abonați";
Nu împiedică verificarea, dacă această fereastră apare pe acest computer. În aceste scopuri, lucrul cu cookie-urile este destul de potrivit.

Continuând seria de articole "Pentru începători", vreau să spun despre aspectul ferestrelor modale.

Doar în cazul în care vă voi explica că, sub ferestrele modale (pop-up) sunt înțelese de straturile, care sunt toate celelalte și necesită orice acțiune de la utilizator - pentru a intra ceva, pentru a confirma sau a respinge ceva, etc. IE este funcțional sau o fereastră separată în interiorul ferestrei principale sau a alertei \\ confirmare.

La prima vedere, ceea ce poate fi mai ușor - un bloc cu poziționare fixă \u200b\u200bși asta este. Dar există nuanțe aici, care vor fi discutate.

În general, codul paginii HTML cu PopUp_om va analiza:

Prima problemă cu care vom întâlni, nu va fi mai tânăr să deschideți pop-ul, care este mai mare decât înălțimea ferestrei browserului, dacă folosim poziționarea fixă. Dacă fereastra laterală este mai mică, va arăta foarte neplăcut de pe fundal, când fereastra este derulată.

Aceste probleme sunt deosebit de relevante pentru fereastra afișată pe ecranul smartphone-ului, propun următoarea soluție: nu vom înregistra fereastra noastră modală, iar blocul cu întregul conținut al site-ului și fereastra modală va fi poziționată absolut:

/ * Dimming * / .Overflow (fundal: RGBA (0, 0, 0, 0,7); Poziție: Fixed; Top: 0px, partea de jos: 0px; stânga: 0px; Z-Index: 100; Afișaj: Nici unul ;) / * Fereastră modală * / .popup (poziție: z-index: 101; fundal: #fffffff; lățime: 600px; min-înălțime: 300px; margine-stânga: -300px; Top: 10%; stânga: 50%; Afișaj: Nici unul;) .popup .Close (poziție: absolut; Top: 10px; dreapta: 10px; Afișaj: bloc; lățime: 17px; înălțime: 17px; Opacitate: 0,5; .. / IMG / Close.png) Centrul No-Repeat; -Webkit-tranziție: Opacitate 0.5s; -moz-tranziție: Opacitate 0.5s; Tranziție: Opacitate 0.5s;) .Popup .Close: Hover (opacitate: 0,8;)

Și acum să începem procesarea evenimentelor de deschidere și închidere ale ferestrei noastre:

Var win_top \u003d 0; $ (Document). () () () (// deschide fereastra modală când faceți clic pe conținutul $ ("# # listă"). Faceți clic pe (Funcție () (PopUp_Open ("# Mypopup");))) // deschis Fereastra modală imediat când descărcați pagina PopUp_Open ("# mypopup"); // Adăugați un handler de închidere al ferestrei modale $ (Document) .on ("faceți clic", ".Popup .Close, .Overflow", funcția ( ) (PopUp_Close () retur fals;)))))) Funcție popup_open (selector) (dacă (selector.length) (win_top \u003d $ (fereastră) .scrolltop (); $ ("# listă"). CSS (("poziția" : "Fix", "Stânga": "0", "dreapta": "0", "TOP": "0", // Adăugați offset, astfel încât în \u200b\u200bfundal există exact partea pe care am pierdut-o "marjă" -TOP ":" - "+ win_top +" px ")) $ (" overflow, "+ selector) .Fadein ();)) funcția popup_close ($ (" overflow, .popup "). Ascundeți ( ); $ ("# Listă"). CSS (("Poziție": "static", "margine-top": "0px")) // returnează defilarea în loc $ (fereastră) .scrolltop (win_top);)

Aici, un selector (ID) este transmis ca parametru. Această abordare este convenabilă dacă există mai multe POP pe pagină, care sunt numite făcând clic pe link-uri. Apoi, în legăturile atributelor HREF, puteți înregistra blocul blocului care urmează să fie deschis ca o ancoră:
href \u003d "# mypopup" și când procesați clic pe urmărirea valorii acestui atribut

Var id \u003d $ (this) .attr ("href");

Și ultimul cod de bare a rămas - adaptarea mobilă a ferestrei noastre modale. Aici totul este complet simplu - când ajungeți la o anumită lățime, schimbăm alinierea la ea și lăsăm să numărăm dinamic dimensiunile:

@Media ecran și (max-lățime: 650px) (.popup (lățime: auto; margine-stânga: 0px; Top: 40px; stânga: 10px; dreapta: 10px;))

Fereastra pop-up este un anunț pop-up, conceput pentru a atrage traficul web sau colectarea adreselor. e-mail. Astfel de elemente sunt adesea forme de publicitate online în WorldWideWeb. De regulă, acestea sunt ferestre noi într-un browser web pentru a afișa publicitatea. De obicei, ele sunt generate de JavaScript folosind scripting-ul cross-site (XSS), uneori cu sarcina utilă secundară și folosind Adobeflash.

Soiul pop-up este anunțurile pop-up care se deschid într-o nouă fereastră de browser, ascunsă activă.

Istoria originii.

Primele ferestre pop-up au apărut pe Tripod.com Hosting la sfârșitul anilor 1990. Ethan Tsukerman susține că a scris codul de lansare a publicității în ferestre separate ca răspuns la plângerile anunțurilor bannere. Ulterior, dezvoltatorul și-a adus în mod repetat scuzele pentru inconveniente, care a început să provoace invenția sa.

Opera a fost primul browser major în care au fost incluse instrumentele pentru a bloca ferestrele pop-up. Mozilla Browser mai târziu a îmbunătățit aceste evoluții, începând să blocheze fereastra pop-up generată când pagina este încărcată. 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 și în acest browser.

Cele mai moderne browsere sunt dotate cu instrumente de protecție pop-up. Instrumentele terțe includ de obicei alte funcții, cum ar fi filtrarea anunțurilor.

Ferestre pop-up.

Unele tipuri de conținut încărcat - imagini, muzică gratuită și altele - pot provoca ferestre pop-up. În plus, ele arată uneori ca pagini web obișnuite, iar numele site-ului va fi afișat în bara de căutare. Multe resurse utilizează pop-up-uri pentru a afișa informații fără a întrerupe pagina în prezent în prezent. De exemplu, dacă ați fost completat cu formularul de pe pagina web și ați avut nevoie de un manual suplimentar, fereastra pop-up vă va oferi informații suplimentareFără a provoca pierderea oricăror date deja introduse în formular. Cele mai multe blocări de afișare pop-up permit o astfel de încărcare.

Dar trebuie să vă amintiți că unii instalatori web, de exemplu, utilizați de McAfee, utilizează o fereastră pop-up pentru instalare. software.. Pe multe browsere de Internet apăsând cTRL KEYS. Când faceți clic pe link, veți ocoli filtrul.

În acest caz, un clic (chiar și la întâmplare) o fereastră pop-up poate duce la deschiderea altora.

Bypassing Blocker-ul pop-up

Combinația unui banner publicitar și ferestrei pop-up este un "anunț de anunț", care utilizează DHTML pentru a afișa pe ecranul conținutului paginii. Prin intermediul Anunțul JavaScript. Acesta poate fi impus pe partea de sus a unei pagini web într-un strat transparent. Această reclamă poate apărea în aproape toate cazurile atunci când autorul publicității dorește. Un astfel de script de ferestre pop-up nu poate fi observat în avans. De exemplu, publicitatea poate conține animație Adobeflash asociată cu site-ul agentului de publicitate. De asemenea, poate arăta ca o fereastră obișnuită. Pe măsură ce publicitatea face parte dintr-o pagină web, nu poate fi blocată folosind un blocant, dar deschiderea sa poate fi evitată de către aplicații terțe părți (cum ar fi adblock și adblockplus) sau folosind tabele personalizate de stil.

Poc.

Un astfel de anunț este similar cu fereastra de populație obișnuită, dar este afișată ascunsă pentru fereastra principală a browserului și nu apare în fața acestuia. Când anunțurile pop-up au devenit larg răspândite și au început să ocupe un întreg ecran al unui computer, mulți utilizatori au învățat să le închidă imediat fără să se uite. Prin urmare, a apărut POPunder, care nu interferează cu utilizatorul pentru a vedea conținutul site-ului. Acestea, de regulă, rămân neobservate până când fereastra principală a browserului este închisă sau laminată. Studiile au arătat că utilizatorii reacționează mai bine la o astfel de publicitate decât la anunțurile pop-up, deoarece nu arată atât de indispensabile.

Tehnologia populară de publicitate

Două foarte simple sunt implicate în publicitate funcții JavaScript.Introdus în 1997 folosind browserul Netscape 2.0b3. Această metodologie este utilizată pe scară largă pe Internet. Editorii web moderni și agenții de publicitate îl folosesc pentru a crea o fereastră înainte de conținutul paginii, boot-ul publicitar și apoi îl trimiteți în spatele ecranului.

Cele mai multe browsere moderne vă permit să deschideți fereastra pop-up Popup numai dacă există o interacțiune cu utilizatorul (de exemplu, un clic pe mouse). Orice apeluri non-interactive (apel invers la cronometru, evenimente de descărcare etc.) vor fi blocate de o fereastră nouă. Pentru a obține această restricție, majoritatea pop-up-urilor sunt lansate folosind un ascultător de evenimente de șoarece atașat direct la document sau organism de documente. Acest lucru vă permite să remediați toate cazurile de clic pe pagina care nu a fost utilizată de alte stivuitoare de evenimente. De exemplu, atunci când utilizatorul selectează textul, faceți clic pe mouse-ul este observat de către ascultătorul atașat la document. Ca rezultat, se deschide o fereastră pop-up utilizând codul de mai sus.

Generator de ferestre "Sly"

Utilizatorii de diferite site-uri și aplicații web se confruntă constant cu pop-up-uri nedorite atunci când se utilizează browserul. În mod tipic, o astfel de fereastră pop-up este îndepărtată utilizând funcția "Închidere" sau "Anulare". Deoarece acesta este un răspuns tipic de utilizator, dezvoltatorii au început să aplice câteva trucuri. Astfel, atunci când se creează mesaje publicitare, butoanele de ecran sau comenzile sunt create, similar opțiunii "Î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ărcați un fișier nedorit la sistemul de utilizatori).

Deoarece tehnologia pentru designul web permite autorilor să utilizeze orice opțiune "imitație", unii utilizatori refuză să facă clic sau să interacționeze cu orice element din interiorul ferestrei pop-up.

Redirecționarea adresei URL

Uneori, adresa URL este redirecționată pagini promoționale Utilizarea funcției de redirecționare a adresei URL de fundal. Acestea sunt uneori deschise într-o filă nouă, iar apoi conținutul fila de fundal vechi este înlocuită de paginile publicitare utilizând Redirect. Adblockplus, Ublock sau Noscript nu pot bloca aceste redirecționare pop-up. Această caracteristică utilizează din ce în ce mai mult distribuitori de publicitate în căutarea unui mod, cum să faceți o fereastră pop-up cea mai activă.

Cum să scapi de ferestre pop-up

Cum să eliminați publicitatea în browser? În primul rând, verificați disponibilitatea actualizărilor. Salvarea browserului dvs. în stare relevantă va avea mare importanță În lupta împotriva ferestrelor pop-up. Cele mai multe browsere sunt configurate să se actualizeze automat, dar pot fi dezactivate. Acest proces durează de obicei doar câteva minute.

• Firefox: Apăsați butonul cu numele aplicației din colțul din stânga sus. Deplasați indicatorul mouse-ului la "Ajutor" și selectați "Despre Firefox". Aceasta va deschide o fereastră cu informații despre versiunea browserului. Dacă browserul dvs. nu este descărcat automat și instalat.
• Chrome: Apăsați butonul MENU din colțul din dreapta sus. Selectați "Despre Chrome" din partea de jos, se va deschide noua insetată, iar browserul va verifica disponibilitatea actualizărilor. Dacă acestea sunt, acestea vor fi instalate automat.
• Internet Explorer: Metoda de actualizare depinde de versiunea de furnir utilizată. Pentru opțiunile mai vechi, va trebui să intrați în centru actualizări Windows.. Pentru Internet Explorer 10 și 11 puteți activa actualizari automateFăcând clic pe pictograma Gear și selectând despre Internet Explorer.

Dacă actualizările nu vă ajută

Uneori fereastra pop-up pentru site și software-ul similar este încorporat prea adânc, astfel încât acesta să poată fi îndepărtat prin actualizarea. În astfel de cazuri, reinstalarea sau schimbarea unui browser web poate ajuta la rezolvarea problemei.

Prima descărcare ultima versiune Browserul pe care doriți să îl utilizați. Puteți găsi linkuri pentru a descărca pe pagina principală Fiecare aplicație.

Mulți utilizatori de internet, termenul "fereastră plutitor" cauzează asociații negative. Înainte de ochi imediat "plutește" imaginea despre modul în care încercați să vizualizați informațiile necesare pe site, această gadda închide piesa de text dorită. Ce este și mai rău dacă încercați să o închideți, utilizatorul se întâmplă adesea pe o altă resursă.

Este Gadda de ferestre pop-up?

În ciuda unei astfel de glorie proaste, ferestrele pop-up nu se pot supăra, ci și să beneficieze. Inițial, ele sunt doar o varietate casetele de dialogutilizate în programare ca elemente de interfață cu utilizatorul.

Acestea servesc la informare și ca mijloc de dialog între utilizator și program (aplicație web). Dar, din păcate, o astfel de atitudine negativă a multor utilizatori la ferestre pop-up este în mare măsură justificată, deoarece sunt folosite în principal pentru scopuri publicitare.

• Deschiderea în prim-plan (pop-up) - pop-up deasupra principalului;
• Deschiderea în fundal (Pop-Sub) - Deschideți pe fereastra principală.

Acestea din urmă sunt cele mai victime. Ele devin active și vizibile pentru utilizator numai după închiderea cea principală. Prin urmare, pentru a determina sursa lor și a le bloca în timp.

Instrumente de luptă

Datorită utilizării pe scară largă a ferestrelor pop-up pentru publicitatea nedorită pe Internet, mulți dezvoltatori de software au început să încorporeze un mijloc de combatere a acestora.

Programul principal de utilizare a Internetului este browserul. Prin urmare, modul principal de blocare a acțiunii ferestrelor publicitare este implementat în browser:

• Internet Explorer - a devenit ultimul dintre toate produsele software în care a fost implementată posibilitatea blocării publicității pop-up. Acest lucru a fost făcut numai în 2004;
• Opera - Acest produs a devenit primul browser din lume cu funcția de blocare încorporată a ferestrelor pop-up. Ferestrele pop-up în operă pot fi blocate, începând cu anul 2000;
• Mozilla Firefox - Acest browser a îmbunătățit o abordare a combaterii publicității, care a fost implementată în Opera. Spre deosebire de el, nu toate publicitatea pop-up este blocată în Mozil, dar numai cea care este încărcată atunci când se deschide fereastra principală.

În browserele moderne, blocarea sistemului de blocare este configurată prin interfața cu utilizatorul. În Chrome, ca în majoritatea altor browsere, abilitatea de a activa sau dezactiva blocarea, precum și elaborarea unei liste de excepții ( site-uri de încredere):

Crearea de ferestre pop-up folosind JavaScript

În programarea web, mai multe tehnologii sunt utilizate pentru a crea ferestre pop-up. Principalele mijloace de creare a acestora rămâne JavaScript. Funcționalitatea sa are mai multe tipuri de dialoguri, a căror acțiune este similară cu acțiunea ferestrelor pop-up:

• Metoda Alert () afișează mesajul text obișnuit. Pentru a ascunde dialogul după citire, trebuie să faceți clic pe butonul "OK" din partea de jos a ferestrei;
• Confirmați () metoda este similară cu metoda anterioară. Dar dialogul afișează dialogul, cu excepția "OK", este echipată și cu butonul "Anulare". Cu ajutorul lor, utilizatorul poate accepta sau abandona starea specificată în fereastră;
• Prompt () Metoda - servește la apelul unei alte specii din fereastra pop-up JavaScript. Spre deosebire de cele menționate mai sus, fereastra este, de asemenea, prevăzută cu un câmp de text. Puteți introduce date text în ea care poate fi atribuit valoarea variabilei dorite.

Acțiunea tuturor celor trei metode și soiuri cauzate de acestea sunt prezentate în imagine:

Iată sintaxa completă a metodei:

win \u003d fereastră. Deschis (URL, nume, parames)Unde:

• uRL este o adresă de pagină care se va deschide într-o fereastră nouă;
• Nume - Numele ferestrei create. Pot fi utilizate pentru prelucrarea ulterioară în forme (parametru țintă);
• Params - rând de parametri pentru o fereastră nouă. Lor lista plina Vă puteți găsi din documentația JavaScript.

Imaginea de mai jos prezintă acțiunea metodei și se administrează un script-ul pop-up simplificat:

Crearea unei ferestre pop-up utilizând CSS

De asemenea, puteți crea o fereastră pop-up în CSS. Această caracteristică a fost implementată numai cu randamentul celei de-a treia versiuni a acestei tehnologii. Nu este necesar să abuzați această opțiune, deoarece va funcționa numai în cele mai noi versiuni ale browserelor:

Prezentare generală a altor tehnologii

Nu este necesar să se dezvolte independent o fereastră pop-up. Acum există o mulțime de plug-in-uri gratuite pe jquery. Prin conectarea unuia dintre ele, veți obține o fereastră finalizată.

Există, de asemenea, multe plug-in-uri pentru CMS populare. Acestea pot include un set întreg de ferestre. Designul și funcționalitatea fiecăruia dintre ele sunt "ascuțite" pentru a efectua o sarcină specifică ( Înregistrare, trimitere și altele).

Există, de asemenea, mai multe scripturi populare. Un exemplu de unul dintre ele va fi prezentat mai jos. Un astfel de principiu utilizează ferestre pop-up în contact și alte rețele sociale populare:

Codul este dat în opțiunea "pentru leneș". Prin introducerea acestuia în orice editor și rularea pentru a executa, veți primi un exemplu de ferestre pop-up bazat pe jQuery.