Ne creăm propria fereastră pop-up folosind javascript, css și jQuery. Ce metodă ar trebui să aleg? Crearea unei ferestre modale folosind HTML5 și CSS3

Pentru mulți utilizatori de internet, termenul „fereastră pop-up” evocă asocieri negative. O imagine „plutește” imediat în fața ochilor tăi despre cum, atunci când încearcă să vizualizeze informațiile necesare pe site, această reptilă acoperă fragmentul de text necesar. Ceea ce este și mai rău este că, dacă încercați să-l închideți, utilizatorul este adesea transferat către o altă resursă cu totul.

Aceste ferestre pop-up ale tale sunt atât de nenorocite?

În ciuda acestei reputații proaste, ferestrele pop-up pot fi atât utile, cât și enervante. Inițial, acestea sunt doar un tip de casete de dialog folosite în programare ca elemente ale interfeței cu utilizatorul.

Acestea servesc pentru 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 față de ferestrele pop-up este în mare măsură justificată, deoarece pe internet sunt folosite în principal în scopuri publicitare.

Deschidere în prim-plan (pop-up) - pop-up deasupra celui principal;
Deschidere în fundal (pop-under) - deschideți în spatele ferestrei principale.

Acestea din urmă sunt cele mai insidioase. Ele devin active și vizibile pentru utilizator numai după ce cea principală este închisă. Prin urmare, nu va fi posibil să se determine sursa și să le blocheze în timp.

Mijloace de luptă

Datorită utilizării pe scară largă a reclamelor pop-up nedorite pe Internet, mulți dezvoltatori de software au început să includă contramăsuri în produsele lor.

Principalul program de utilizare a internetului este browserul. Prin urmare, principala metodă de blocare a ferestrelor publicitare este implementată în browser:

Internet Explorer a fost ultimul dintre toate produsele software care a implementat capacitatea de a bloca reclamele pop-up. Acest lucru s-a făcut abia în 2004;
Opera - acest produs a fost primul browser din lume cu un blocator de ferestre pop-up încorporat. Ferestrele pop-up din Opera pot fi blocate din 2000;
Mozilla Firefox - Acest browser a îmbunătățit abordarea de combatere a publicității care a fost implementată în Opera. În schimb, în Mozilla, nu toate reclamele pop-up sunt blocate, ci doar cele care sunt încărcate atunci când este deschisă fereastra principală.

În browserele moderne, sistemul de blocare a ferestrelor pop-up este configurat prin interfața cu utilizatorul. Chrome, ca majoritatea celorlalte browsere, are capacitatea de a activa sau dezactiva blocarea, precum și de a crea o listă de excepții (site-uri de încredere):

Crearea de ferestre pop-up folosind javascript

În programarea web, mai multe tehnologii sunt folosite pentru a crea ferestre pop-up. Principalul mijloc de a le crea este încă javascript. Funcționalitatea sa include mai multe tipuri de dialoguri, a căror acțiune este similară cu acțiunea ferestrelor pop-up:

Metoda alert() afișează un mesaj text obișnuit pe ecran. Pentru a ascunde dialogul după citire, trebuie să faceți clic pe butonul „Ok” din partea de jos a ferestrei;
Metoda confirm() este similară cu metoda anterioară. Dar dialogul pe care îl afișează, pe lângă „Ok”, este echipat și cu un buton „Anulare”. Cu ajutorul lor, utilizatorul poate accepta sau refuza condiția specificată în fereastră;
Metoda prompt() este folosită pentru a apela un alt tip de fereastră pop-up javascript. Spre deosebire de cele menționate mai sus, această fereastră este echipată și cu un câmp de text. Utilizatorul poate introduce date text în el, care pot fi atribuite valorii variabilei dorite.

Acțiunea tuturor celor trei metode și tipurile de dialog pe care le numesc sunt prezentate în imagine:

Dar acestea sunt doar tipuri de dialoguri. Pentru a crea o fereastră pop-up reală în javascript, utilizați metoda open() a obiectului fereastră.

Iată sintaxa completă a metodei:

win = fereastra. deschis (url, nume, parametri), unde:

url este adresa paginii care se va deschide într-o fereastră nouă;
Nume – numele ferestrei create. Poate fi folosit pentru prelucrarea ulterioară în formulare (parametru țintă);
Params – un șir de parametri pentru noua fereastră. Puteți afla singuri lista lor completă din documentația javascript.

Imaginea de mai jos arată metoda în acțiune și oferă un script pop-up simplificat:

Este creată o funcție f1, al cărei corp implementează un apel la fereastră. deschis() . Apoi această metodă este apelată cu un parametru care indică adresa paginii care se va deschide în fereastra creată. După aceasta, este apelată metoda setTimeout(). Funcția f1 și intervalul de timp după care se va deschide o nouă fereastră îi sunt transmise ca parametri.

Crearea unui pop-up folosind CSS

De asemenea, puteți crea o fereastră pop-up în CSS. Această caracteristică a fost realizată numai odată cu lansarea celei de-a treia versiuni a acestei tehnologii. Nu ar trebui să folosiți excesiv această opțiune, deoarece va funcționa numai în cele mai noi versiuni de browsere:

După cum puteți vedea din imagine, o astfel de fereastră modală a fost creată folosind CSS și html. Spre deosebire de cele create folosind js, această fereastră pop-up nu poate fi mutată în pagină. În plus, codul său este prea greoi pentru a fi descris în scopul acestui articol. Dar o astfel de fereastră nu va fi blocată de browser.

Revizuirea altor tehnologii

Nu este deloc necesar să dezvoltați singur o fereastră pop-up. În prezent, multe plugin-uri jquery gratuite au fost create pentru aceasta. Conectând unul dintre ele, veți obține o fereastră terminată.

Există, de asemenea, multe plugin-uri pentru CMS popular. Acestea pot include un întreg set de ferestre. Designul și funcționalitatea fiecăruia dintre ele este „personalizat” pentru a îndeplini o anumită sarcină (înregistrare, trimiterea unui mesaj etc.).

Există, de asemenea, mai multe scripturi populare. Un exemplu al unuia dintre ele va fi dat mai jos. Ferestrele pop-up din Contact și alte rețele sociale populare funcționează pe acest principiu:

Cum se face o fereastră pop-up în Jquery $(document).ready(function())( PopUpHide(); )); funcția PopUpShow())( $("#window-popup").show(); ) funcția PopUpHide())( $("#window-popup").hide(); ) .box ( lățime: 400px; înălțime : 300px ; culoare de fundal: #ccc culoare: #fff ( lățime:100%; ascuns; poziție: fix; top: 0px; .popup .popup-content (margină: 40px auto; lățime: 200px; înălțime: 80px; culoare: #c5c5c5; border-radius: 5px; 0px 10px #000;
Afișați popup Felicitări, ai făcut un pop-up!!! Ascunde pop-up

Codul este dat în versiunea „pentru leneși”. Lipindu-l în orice editor și rulându-l, veți obține un exemplu gata făcut de fereastră pop-up bazată pe jquery.

O zi bună tuturor cititorilor acestui articol. Dacă trebuie să creați o fereastră pop-up pentru serviciul dvs. web, atunci ați găsit publicația potrivită! Astăzi vă voi spune cum să creați o fereastră pop-up cu instrumente JavaScript, css și jQuery.

Articolul va discuta în detaliu 3 opțiuni pentru scrierea ferestrelor pop-up cu fundal întunecat și, la final, va analiza fiecare metodă. Puteți utiliza ulterior orice cod doriți din exemplele prezentate în programele dumneavoastră. Acum să trecem la treabă!

Nu, spune-mi, de ce este nevoie deloc!?

De fapt, un mecanism precum ferestrele pop-up este folosit în multe. Ca exemplu, putem cita același „VKontakte” sau alte rețele sociale, unde atunci când vizualizați fotografii sau alte fișiere grafice, utilizatorul se deschide, conceput ca o fereastră pop-up.

Un alt caz de utilizare obișnuit pentru această abordare îl reprezintă casetele de mesaje pentru persoanele care intră sau ies de pe site. Astfel de mesaje apar o dată fie la încărcarea paginii, fie după ce faceți clic pe crucea care închide fila.

De asemenea, sunt sigur că fiecare dintre voi a văzut o imagine în care, atunci când faceți clic pe anumite butoane ale unui serviciu, vă apare o fereastră în fața voastră care vă cere să vă înregistrați. După completare, datele sunt trimise către server folosind, de exemplu, php și apoi vă sunt deschise toate capacitățile serviciului.

Nu pot să tac despre a treia modalitate de a folosi ferestrele pop-up. Acesta este spam și publicitate.

Să începem simplu

Acum ajungem la exemplele în sine. Voi începe cu o implementare software realizată folosind css și html. Am scris o aplicație în care apare o fereastră când se apasă un anumit buton. Am pus imaginea în ea. Cu toate acestea, puteți pune orice informație acolo, fie că este vorba de linkuri, text, fotografii, videoclipuri, formulare de înregistrare și așa mai departe.

Deci, el însuși se încadrează în câteva rânduri, deoarece tot sucul se află în stilizarea corectă.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Fereastra pop-up Faceți clic pe mine

După cum puteți vedea, totul este foarte simplu. Acum să trecem la tabelele în cascadă. Va fi mult cod acolo, dar din nou este ușor.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

/*Dim display*/ .overlay ( culoare de fundal: rgba(1, 0, 0, 0,77); dreapta: 0; stânga: 0; poziție: fix; sus: 0; jos: 0; z-index: 11; display: none ) /*Layer-ul devine vizibil*/ .overlay:target ( display: block; ) /*Întinde imaginea la toată lățimea popup-ului*/ .window img ( width: 100%; ) /*Caracteristici a ferestrei propriu-zise care apare după apăsarea butonului*/ .window ( stânga: 50%; z-index: 12; margine: 0; poziție: fix; padding: 15px; chenar: 1px solid #383738; fundal: #fefeff; border-radius: 15px box-shadow: 0 13px 21px rgba(0,1,0,.19),0 21px 63px rgba(0,1,0,.31): translate(-50%, -450); %); 0,6 s ease-out; *Aspectul butonului „Închidere” */ .close (sus: -11px; dreapta: -11px; lățime: 23px; înălțime: 23px; poziție: absolut; padding: 0; chenar: 2px solid #ccd; chenar-radius: 15px; culoare de fundal: rgba( 61, 61, 61, 0,81); casetă-umbră: 0 0 12px #010; text-align: centru; text-decor: niciuna; font: 18px sans-serif; greutatea fontului: bold; tranziție: toate ușurința .9s; ) .close:before ( culoare: rgba(254, 254, 254, 0,89); conținut: „X”; text-shadow: 0 1px 3px #010; font-size: 14px; ) /*Schimbați caracteristicile când treceți cu mouse-ul peste un area */ .close:hover ( culoare de fundal: rgba(253, 21, 0, 0.83); transform: rotate(360deg); ) /*Designul butonului principal*/ #button (marja-stânga: 40%; dimensiunea fontului: 33px;

Caracteristici JavaScript

Limbajul de scriptare are multe capacități încorporate pentru a crea ferestre pop-up. Astfel, ferestrele pop-up pot fi apelate folosind funcțiile standard de alertă, confirmare și promptare.

Alerta afișează un mesaj simplu pentru utilizator. Am folosit această metodă de multe ori în postările anterioare. Puteți închide o astfel de fereastră făcând clic pe cruce sau „OK”. Sintaxa este următoarea:

alert("Iată mesajul meu!");

Este necesară confirmarea pentru a pune o întrebare utilizatorilor. Această fereastră poate fi văzută adesea când părăsești un site sau verifici orice informații despre tine. De exemplu:

‹script› var text = confirm(„Un conținut text. Ați citit totul?”);

Dacă puteți introduce unele informații în fereastra standard care apare, atunci aceasta este prompt.

1 2 3 4 5 6 7 8 9

var isLogIn= prompt("Ești abonat?", ""); alert("Răspuns: "+isLogIn);

În plus, în js window are o metodă care vă permite să încărcați pagini noi și să deschideți ferestre noi. Acest

window.open („cale”, „nume”, „parametri”)

Această metodă are mulți parametri încorporați. Dacă doriți să le dezasamblați, atunci deschideți documentația oficială. Voi merge direct la un exemplu simplu.

1 2 3 4 5 6 7 8 9 10 11 12 13

fereastra pe js

fereastra pe js var PopUpW = window.open("", "PopUp Window", "resizable=nu,scrollbars=no,width=350,height=150,copyhistory=1"); PopUpW.document.write("O mulțime de conținut text!");

Datorită acestui cod, fereastra pop-up va apărea imediat după încărcarea paginii. Vă rugăm să rețineți că parametrii trebuie listați separați prin virgule și fără spații.

Lucrul cu jQuery

Ei bine, am ajuns la biblioteca js - jQuery. Pentru a implementa abordarea descrisă, am scris două funcții în jq, care sunt responsabile pentru aspectul ferestrei și pentru închiderea acesteia.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

Faceți clic pe linkul X O sugestie!

/*deschide fereastra pop-up*/ $(document).ready(function() ( $("a#start").click(function(event)( event.preventDefault(); $("#overlay").fadeIn( 250 , function())( $("#popUp") .css("display", "block") .animate((opacity: 1, top: "55%"), 490); /* )); făcând clic pe cruce închid fereastra*/ $("#close, #overlay").click(function())( $("#popUp") .animate((opacity: 0, top: "35%") , 490, function())( $(this).css("display", "none"); $("#overlay").fadeOut(220); )); #popUp ( sus: 12%; stânga: 50%; înălțime: 200px; poziție: fix; lățime: 300px; chenar-rază: 11px; fundal: #fef; margin-left: -150px; margin-sus: -100px; afișare: niciuna; opacitate: 17px; z-index: 6; suprapunere (z-index:4; culoarea fundal:#010; poziție:fixă; opacitate:0,86; lățime:100%; înălțime:100%; afișare:niciuna; sus:0; stânga:0; ) Faceți clic pe link X O sugestie!

Ce e mai bine?

De fapt, fiecare metodă dată funcționează excelent și poate fi folosită pe orice serviciu web. Totul depinde de dorința dezvoltatorului, de abilitățile sale și de complexitatea proiectului creat.

Așa că experimentează, învață noi modalități de a-l implementa și nu uita să te abonezi la blogul meu. Mă bucur mereu să am noi abonați! Te văd! Pa! Pa!

Cu stima, Roman Chueshov

Citește: de 721 de ori

Care au fost menționate mai sus.

Vorbind despre avantaje, putem evidenția câteva dintre cele cheie:

Aspect ușor de personalizat (în arhivă veți găsi 2 teme: implicit și bootstrap);
Notificări de tip Growl afișate frumos după răspunsul la alerte, care pot fi folosite ca feedback pentru utilizator;
Utilizează numai capabilități JavaScript și nu necesită biblioteci terță parte;
Compatibilitate între browsere;
Alertify are propria sa documentație completă.

Există deja suficiente merite pentru un patru solid, plus fiecare va nota ceva pentru ei înșiși. Am fost deosebit de mulțumit de mini-notificări, care nu se găsesc întotdeauna în scripturile de ferestre modale gata făcute. Ei bine, alertify cântărește destul de mult. În zilele noastre, aproape orice site web are o mulțime de scripturi și biblioteci terțe, cum ar fi jQuery și MooTools, iar acest lucru adaugă adesea încărcare suplimentară paginilor.

Dacă, în timp ce citiți introducerea, nu ați avut încă timp să vă uitați la exemplele pe care le-am pregătit, atunci vă sugerez să le studiați și să le încercați. Pagina demonstrativă arată clar cum funcționează ferestrele pop-up JavaScript și cât de ușor este de utilizat. Acum vom continua să înțelegem alertify și, mai întâi, să conectăm pluginul în sine și stilurile sale:

Vom adăuga scriptul la sfârșitul paginii:

Acum avem un nou obiect Alertify și pentru a-i vedea conținutul, vă sugerez să folosiți firebug.

Acest obiect are încă două subobiecte, pe care le vom folosi pentru a implementa ferestrele și notificările noastre modale. Chiar la începutul articolului am spus că acest scenariu este autosuficient și așa este! De exemplu, nu trebuie să scriem o versiune lungă a căutării unui element după id în arborele DOM - vom folosi doar metoda get(). Celelalte două metode, on() și off(), ambele în jQuery, fac exact același lucru - atașarea evenimentelor la elemente sau eliminarea acestora.

Acum vom scrie o bucată introductivă de cod în care vom ascunde apelurile lungi la metode și obiecte:

Var d = Alertify.dialog, l = Alertify.log, $ = Alertify.get;

Astfel va fi mult mai convenabil. În exemplele mele, nu voi folosi metoda on(), dar voi folosi onclick pentru claritate. Să adăugăm marcaj HTML pentru prima noastră alertă:

Dialog de alertă

Să folosim pluginul:

$("alerta").onclick = function())( d.alert("Mesaj text in fereastra de alerta modala"); return false; );

Pentru a crea o fereastră modală confirm(), adăugăm și HTML:

Confirmare dialog

Și să folosim codul corespunzător:

$("confirma").onclick = function())( d.confirm("Mesajul text in fereastra modal confirma", function())( // Cand dai click pe "OK", function())( // Când faceți clic pe „Anulare” ));

Rămânem cu prompt(), adăugați HTML:

Dialog prompt

Și codul JavaScript în sine:

$("prompt").onclick = function())( d.prompt("Mesaj text în fereastra modal prompt", function(str)( // Când faceți clic pe "OK" // str - valoarea acceptată în fereastra), funcția ()( // Când faceți clic pe „Anulare”), „Valoare implicită”;

După cum puteți vedea, ne-am uitat la principalele ferestre modale și este puțin probabil să apară dificultăți cu ele, iar acum să trecem la notificări. De fapt, notificările sunt implementate prin obiectul jurnal. Și iată mai multe opțiuni pentru cum să-l folosești, primul este mesajul obișnuit:

L.info(„Mesaj glisant regulat”);

Mesaj de succes:

L.success(„Notificare reușită”);

Despre eroare:

L.error(„A apărut o eroare la completarea formularului”);

Așa că am configurat alerte și notificări frumoase în proiectul nostru. Sper că această soluție vă va fi de folos în munca și practica dvs., dar asta este tot pentru mine.

Cu toții care rătăceam prin imensitatea rețelei globale am dat peste site-uri care, la încărcare, imediat sau cu o întârziere de câteva secunde apăreau cu conținut variat, fie că este vorba doar de o reclamă, de o reclamă pentru un produs, de un formular de abonare sau de un formular de feedback.
Puteți avea atitudini diferite față de astfel de metode de prezentare a informațiilor. De exemplu, toate aceste ferestre pop-up care apar în timpul vizitei unui site sunt, ca să spunem ușor, enervante, dar orice altceva, pur și simplu mă enervează, vreau să plec imediat, să părăsesc acest site, ceea ce fac în majoritatea cazurilor. cazuri. Și toate browserele moderne sunt suspecte de tot felul de ferestre pop-up în etapa inițială de încărcare a unui site, pur și simplu le blochează. Dar, după cum vedem, mulți, mulți webmasteri implementează un mod atât de intruziv de a prezenta informații.

M-a interesat mai mult partea tehnică a problemei și metodele de rezolvare. Nu a trebuit să vin cu nimic special, totul a fost inventat cu mult timp în urmă și funcționează grozav. Astăzi, împreună cu dvs., vom analiza în detaliu cel mai simplu mod de a implementa un pop-up la încărcarea unui site, folosind magia noilor proprietăți și foarte puțin pentru a adormi vigilența browserelor și a avea control asupra timpului de apariție a blocului de informații .

Pentru început, fără a părăsi checkout-ul, pe o pagină demo special pregătită, poți privi rezultatul final a tot ceea ce vom face cu tine. În exemplu, în fereastra pop-up am folosit text și câteva imagini pentru claritate. Mai târziu veți putea să inserați orice doriți în fereastra modală, principalul lucru este să nu exagerați)))).

Marcaj HTML

Dispunerea ferestrei noastre pop-up este extrem de simplă. Avem nevoie doar de două elemente div bloc cu identificatori de id pentru a lega la javascript și a forma aspectul folosind stiluri CSS. Elementul este responsabil de poziționare, culoare de fundal, transparență și gradul de întunecare a acestuia atunci când este lansată fereastra pop-up. Conținutul ferestrei modale va fi plasat în interiorul containerului. De asemenea, trebuie să oferim un link pentru a închide fereastra. Pentru un exemplu vizual, să plasăm un titlu simplu și câteva paragrafe de conținut text. Ca rezultat, vom obține un aspect complet al ferestrei noastre care arată cam așa:

Fereastra modală!

Lățimea ferestrei modale este setată ca procent în funcție de lățimea containerului părinte, în acest exemplu este vorba de estomparea fundalului.

Este posibil să utilizați miniaturi încorporate situate în stânga sau în dreapta într-un container div separat cu o clasă dedicată .pl-left și, respectiv, .pl-right.

Mărimea blocului de miniaturi a fost, de asemenea, determinată în termeni procentuali (25%), oferind astfel posibilitatea unei schimbări proporționale atunci când este vizualizat pe ecranele diferitelor dispozitive ale utilizatorilor.

Cea mai simplă animație a aspectului prin schimbarea proprietății de transparență (opacitate) de la 0 la 1

Pentru ca fereastra să apară nu imediat la încărcarea site-ului, ci cu o întârziere de câteva secunde, folosim un mic javascript și cu ajutorul lui putem regla ora de apariție a ferestrei pop-up. Toate browserele vor reacționa calm la această situație și nu vor bloca funcționarea scriptului și, prin urmare, însuși aspectul ferestrei pop-up. Cel mai bun loc pentru a introduce acest javascript este la sfârșitul corpului paginii html, înainte de eticheta de închidere. Ei bine, scenariul în sine este format din doar câteva rânduri:

< script type= "text/javascript" >var delay_popup = 5000 ; setTimeout("document.getElementById("overlay").style.display="block"" , delay_popup) ;

var delay_popup = 5000; setTimeout("document.getElementById("overlay").style.display="block"", delay_popup);

În exemplu, timpul de apariție a ferestrei este setat la 5000, ceea ce corespunde la aproximativ 5 secunde, puteți introduce orice altă valoare.

Pentru a închide fereastra, folosim pur și simplu un buton standard, o etichetă cu un eveniment onclick și o anumită clasă = „închidere”, pentru a putea stila aspectul prin stiluri CSS.

< button class = "close" title= "Închide" onclick= "document.getElementById("overlay").style.display="none";" >

Astfel, ajungem la cel mai interesant moment (după părerea mea), formarea stilurilor de ferestre pop-up.

Stiluri CSS

Mai întâi, să creăm un identificator #overlay cu care ne vom conecta fereastra cu javascript și vom crea un container de bază< script type= "text/javascript" src= "js/jquery.cookie.js" >

Conectați jQuery din depozitele fără fund ale Google sau puteți descărca pluginuri jQuery de pe site și le plasați pe site-ul dvs. în folderul „js” (de exemplu).
Apoi, conectați fișierul javaScript care conține codul pentru lucrul cu module cookie sau includeți textul scriptului în codul HTML folosind eticheta, astfel:

< script type= "text/javascript" >$(funcție () ( // Verificați intrarea în cookie-uri despre vizită // Dacă există o intrare, nu se întâmplă nimic dacă (! $. cookie("hideModal") ) ( // dacă cookie-ul nu este setat, o fereastră va apărea // cu o întârziere de 5 secunde var delay_popup = 5000 ; setTimeout("document.getElementById("parent_popup").style.display="block"" , delay_popup) , ("hideModal" , ( //); Timpul de stocare a cookie-urilor în zile expiră: 7, calea: "/" ) );

$(function() ( // Verificați intrarea cookie-ului despre vizită // Dacă există o intrare, nu se întâmplă nimic dacă (!$.cookie("hideModal")) ( // dacă cookie-ul nu este setat, va apărea o fereastră apar // cu o întârziere de 5 secunde var delay_popup = 5000 setTimeout("document.getElementById("parent_popup").style.display="block"", delay_popup ) $.cookie("hideModal", true, ( // Timpul de stocare a cookie-urilor în zile expiră: 7, calea: "/" ));

Executabilul js este cel mai bine plasat înaintea etichetei de închidere. În acest exemplu, am arătat opțiunea de a salva cookie-ul după închiderea ferestrei pop-up timp de șapte zile, asta înseamnă că fereastra va fi afișată utilizatorului la prima vizită, o singură dată. În următoarele șapte zile, sau până când utilizatorul șterge cookie-urile din browser, fereastra nu va apărea.
După cum înțelegeți, puteți lega gestionarea evenimentului de scriere cookie de orice alt element. Setați durata de stocare a cookie-urilor să expire: 7 (în exemplu este de 7 zile). Reglați întârzierea apariției ferestrei în funcția setTimeout, în mod implicit, este setată la 5000, adică fereastra va apărea la 5 secunde după încărcarea paginii.

Actualizare din 27 octombrie 2017:

Așadar, am schimbat puțin aspectul ferestrei modale, am adăugat o animație de aspect simplă prin schimbarea proprietății de transparență (opacitate) de la 0 la 1. La demo, am adăugat și opțiunea unei ferestre pop-up cu o intrare cookie; la vizualizare, nu uitați că fereastra apare în această opțiune O dată la 7 zile, așa că ștergem cookie-urile))).

Referitor la design:
Am adunat recent exemple de creare a ferestrelor modale, așa că aruncați o privire, alegeți stilul care vă place și creați, creați...

Acum sper sigur - asta e!

Cu tot respectul, Andrew