O fereastră PopUP este un anunț pop-up conceput pentru a atrage trafic web sau pentru a colecta adrese. 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 reclame pop-up care se deschid într-o nouă fereastră de browser ascunsă în cea activă.

Primele 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 reclamațiile cu privire la 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.

Unele 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. în acest moment pagină. De exemplu, dacă ați completat un formular pe o pagină web și aveți nevoie îndrumări suplimentare, ți-ar oferi fereastra PopUP 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, va ocoli filtrul.

În acest caz, făcând clic (chiar accidental) pe o fereastră pop-up poate duce la deschiderea altora.

Combinaţ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. Prin folosirea Declarație JavaScript poate fi suprapus peste o pagină web în strat transparent. Această reclamă poate apărea în aproape toate cazurile în care agentul de publicitate dorește să apară. 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 blocant, 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 doi foarte implicati funcții simple 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 încărcarea fișier nedorit la 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. Uneori se deschid î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ă eliminați reclamele din browser? În primul rând, verificați dacă există actualizări. Menținerea browserului dvs. la zi va avea mare valoareîn lupta împotriva 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 filă 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ă autentificați la Centru Actualizări Windows. Pentru Internet Explorer 10 și 11, puteți activa actualizări 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 de start fiecare aplicație.

Cel mai probabil, ați văzut deja un mesaj pop-up pe Internet de mai multe ori. fereastra modală- confirmarea inregistrarii, avertisment, informații de fundal, 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.

$(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ă s-a î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. Să trecem la treabă

Mai întâi, să scriem partea html. Plasăm acest cod în corpul documentului dvs.

Apelarea unei ferestre modale

Textul ferestrei modal
Aproape
Text într-o fereastră modală.

Cod CSS. Fie într-un fișier css separat, fie î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;
latime: 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;
}
.aproape(
float:dreapta;
}
.conţinut(
padding-top: 35px;
}

În codul jQuery, ne vom concentra 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();
});
});

Astăzi vom vorbi despre cum să vă creați propria fereastră pop-up pentru site-ul dvs. web. Acum această metodă este foarte popular, dar majoritatea soluțiilor pentru implementarea sa sunt plătite. Nu este un exemplu foarte bun fereastra frumoasa(dar acesta este doar un exemplu) în interiorul intrării...

Î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 acestuia deasupra altor elemente, va fi foarte mare (cu siguranță mai mare decât altele).
#fs_popup- indică faptul că fereastra va fi cu un nivel deasupra fundalului (altfel nu am vedea-o). Dimensiunile sale vor fi 600px cu 300px colțuri 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:

AproapeÎ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
E-mailul dvs.: * - 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 promotionale

. De asemenea, lăsați moștenire mașina, apartamentul și 10% din venit autorului site-ului. Și ne vom completa stilurile pentru mai mult:

#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 computer. Lucrul cu cookie-uri este destul de potrivit pentru aceste scopuri.

despre care vorbim

• element util
• , care oferă informații suplimentare, avertizează, previne, oferă opțiuni și multe altele.
• Ce vom crea?
• În acest tutorial vom crea o fereastră pop-up simplă și frumoasă folosind jquery. Va fi similar cu ceea ce este folosit pe twitter. Desigur, îi poți da stilul care îți place.

Dorim ca acesta să fie centrat pe pagina site-ului atunci când este afișat. Ar trebui să existe un buton de „închidere” sau ceva similar. Când facem clic în afara blocului, fereastra pop-up se va închide automat.

Faceți clic pe mine X Un titlu merge aici: mai mult conținut, pentru când doriți să adăugați puțin mai mult

Caseta pop-up (poziție: absolut; raza marginii: 5px; fundal: #fff; afișare: niciuna; umbră casetă: 1px 1px 5px rgba(0,0,0,0.2); familia de fonturi: Arial, sans-serif ; z-index: 9999999; font-size: 14px .popup-box .close (poziție: absolut; sus: 0px; font-family: Arial, Helvetica, sans-serif; cursor: indicator; culoare: #434343; dimensiunea fontului: 20px; .close:hover. ) .popup-box .top ( umplutură: 20px; ) .popup-box .bottom ( fundal: #eee; chenar-sus: 1px solid #e5e5e5; padding: 20px; chenar-jos-stânga- raza: 5px; chenar- raza-jos-dreapta: 5px; #blackout ( fundal: rgba(0,0,0,0.3); poziție: absolut; sus: 0; overflow: ascuns; z-index: 999999; stânga: 0; afișare: niciunul ;

Vom defini altele Stiluri CSS V Cod JavaScript. Aceste stiluri necesită calcul suplimentar, așa că ar fi mai bine să o faceți folosind jQuery. Să trecem la codul javascript.

Pentru a începe, conectați-vă fișier jQuery biblioteci. După aceea, inițializam jQuery și adăugăm #blackout div în corpul documentului. De asemenea, determinăm lățimea ferestrei pop-up.

$(document).ready(function() ( $("corp").append(""); var boxWidth = 400;

Apoi, creăm o funcție care centrează fereastra. Anterior am stabilit poziționarea absolută în CSS, nu putem folosi margin: 0px auto; trebuie să determinăm lățimea ecranului, să scădem lățimea ferestrei pop-up din aceasta și să împărțim toate acestea la 2. Înălțimea va fi poziția curentă a derulării, plus aproximativ 150px.

Puțin mai devreme am creat un #blackout div, acesta este pentru a acoperi conținutul paginii cu o umbră. Acum trebuie să ne asigurăm că acest bloc va avea aceeași lățime și înălțime ca și monitorul. Acest lucru este calculat și în această funcție.

funcția centerBox() ( /* definește datele necesare */ var winWidth = $(window).width(); var winHeight = $(document).height(); var scrollPos = $(window).scrollTop(); / * Calculați poziția */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = scrollPos + 150 /* Adăugați stiluri la blocuri */ $(".popup-box").css(("width" : boxWidth+; "px" , "stânga": disWidth+"px", "sus": disHeight+"px")); $("#blackout").css(("width": winWidth+"px", "height": winHeight+" px" ; return false ;

Această funcție trebuie rulată de 3 ori. Când utilizatorul derulează, când utilizatorul redimensionează fereastra, și inițial când pagina se încarcă.

$(window).resize(centerBox); $(fereastra).scroll(centerBox); centerBox();

În cele din urmă, trebuie să setăm evenimente de clic. Când utilizatorul face clic într-o zonă din afara ferestrei, aceasta ar trebui să se închidă. Când utilizatorul face clic pe „X”, și fereastra ar trebui să dispară. În cazul clicurilor în interiorul ferestrei pop-up, nu ar trebui să se întâmple nimic. Au fost adăugate comentarii la cod pentru a fi mai ușor de înțeles.

$("").click(function(e) ( /* Preveniți acțiunile implicite */ e.preventDefault(); e.stopPropagation(); /* Obțineți id ( ultimul numărîn numele clasei link) */ var nume = $(this).attr("clasa"); var id = nume; var scrollPos = $(window).scrollTop();

/* Afișarea corectă a ferestrei pop-up, acoperind cu umbră, împiedicând derularea */ $("#popup-box-"+id).show(); $("#blackout").show();$("html,body").css("overflow", "ascuns");