Fereastra pop-up folosind HTML și CSS. Fereastra modală în JavaScript Crearea unei ferestre modale în html

Aceasta completează crearea unei ferestre pop-up simple.

Pentru a crea o fereastră pop-up modală, luați elementul, proiectați-l și adăugați un link, când faceți clic pe el va apărea:

Titlul documentului #okno ( lățime: 300px; înălțime: 50px; text-align: center; padding: 15px; chenar: 3px solid #0000cc; chenar-radius: 10px; culoare: #0000cc; afișare: niciunul; poziție: absolut; sus : 0; dreapta: 0; margine: auto; Apel pop-up

Următorul pas în crearea unei ferestre modale cu drepturi depline este să adăugați un buton care va ascunde fereastra noastră. Vom face un buton dintr-un link obișnuit, adăugându-l la al nostru și proiectându-l:

Titlul documentului #okno ( lățime: 300px; înălțime: 50px; text-align: center; padding: 15px; chenar: 3px solid #0000cc; chenar-radius: 10px; culoare: #0000cc; afișare: niciunul; poziție: absolut; sus : 0; stânga: 0: țintă: bloc; : #e6e6ff;)
Închideți fereastra Apelați fereastra pop-up Încercați »

Pentru efectul de estompare a paginii atunci când afișați o fereastră modală, trebuie să plasați tot codul de fereastră existent într-unul suplimentar:

Fereastra pop-up!
Închideți o fereastră

Poziționați-l pe cel părinte și întindeți-l pe toată lățimea și înălțimea ferestrei. Îl setăm afișare: niciunul; și redirecționează linkul de apel fereastră către acesta.

Pentru copil, eliminați afișajul: niciunul; (nu mai este necesar deoarece părintele va ascunde totul în interiorul ei). Drept urmare, părintele este acum responsabil pentru afișarea ferestrei modale și pentru estomparea fundalului paginii, iar copilul este responsabil doar pentru decorarea ferestrei în sine:

Titlul documentului #zatemnenie ( fundal: rgba(102, 102, 102, 0,5); lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; afișaj: niciunul; ) #okno ( lățime: 300px; alinierea textului: 10px; ; bordura: 1px culoare: #0000cc margine: #f2f2f2;
Închideți fereastra Apelați fereastra pop-up Încercați »

Notă: dacă aveți nevoie ca utilizatorul să vadă imediat o fereastră pop-up când intră în pagină (și nu o apelează printr-un link), atunci adresa paginii va trebui să fie introdusă împreună cu id-ul ferestrei (de exemplu, adresa poate arată astfel: site.ru/papka/documet html#window).

Încă o dată revin la subiectul creării de ferestre modale (pop-up). În ultimul timp sunt din ce în ce mai interesat de diverse tehnici de executare a ferestrelor pop-up, fără a folosi javascript, plugin-uri jQuery etc. Un interes mai mare este posibilitatea de a folosi stiluri pure și potențialul inepuizabil al noilor funcții.
Pe baza evoluțiilor unor burghezi respectați, sunt băieți vicleni în acest sens, obțin rezultate bune în ceea ce privește crearea de ferestre modale folosind CSS3. Sarcina, în primul rând, este de a realiza o compatibilitate cross-browser mai mult sau mai puțin stabilă a rezultatului final și, desigur, cu cele mai mici pierderi, de a reduce cantitatea totală de cod, atât în ​​HTML, cât și în CSS, pentru a ușurează viața lucrătorilor îndelung suferinzi de la construirea de site-uri web.
Ce se întâmplă până la urmă, am în acest sens astăzi, vom vedea și, în același timp, vom învăța cum să facem ferestre modale pop-up folosind „magia” CSS3.

Actualizat: 27.10.2017

Pentru început, toți cei care sunt interesați de acest subiect, puteți să vă uitați la un exemplu despre cum funcționează ferestrele modale în diferite versiuni și să descărcați sursele:

Această lecție nu trebuie luată ca un ghid de acțiune, deoarece în această etapă a fost posibil să se obțină un suport de încredere numai de către browserele moderne (IE 9+, Firefox, Safari, Opera, Chrome). Având în vedere că versiunile vechi ale browserului IE sunt încă destul de populare în rândul utilizatorilor, recomand vizualizarea acestui articol ca un fel de experiment, o demonstrație a capacităților CSS3.

Bine, acum să trecem direct la aspectul real al codului html și stilul ferestrei noastre modale folosind css3)))

Mai întâi, să creăm niște markup HTML de bază. După cum puteți vedea, designul de bază este destul de simplu, dacă luăm în considerare marcajul html al ferestrelor modale și al butoanelor (link-urilor) pentru a le activa. Fiecare fereastră modală nu este altceva decât un container standard, cu un anumit conținut în interior și un buton „Închidere”, format exclusiv folosind CSS.

Deschide fereastra 1 Deschide fereastra 2 Videoclip în fereastra 3 Fotografie în fereastra 4 Aici puteți plasa orice conținut, text cu imagini sau videoclipuri! Titlu Aici inserați videoclipul sau din orice resursă terță parte, YouTube, Vimeo etc. (iframe, încorporare)...

În exemplul de cod de mai sus, pentru claritate, am scris scurte explicații în containerele ferestrelor modale. Prin analogie, trebuie doar să plasați orice conținut în containerul div al ferestrei pop-up, fie că este vorba de text simplu, imagini sau videoclipuri din orice resursă terță parte, YouTube, Vimeo etc. Puteți face linkuri pentru a apela text modal Windows sau le puteți formata în formular, ca în exemplu.

Următorul pas, acesta este cel mai interesant lucru, este important să pregătim toate stilurile necesare pentru fereastra noastră modală, să proiectăm aspectul și să adăugăm funcționalitate. Am omis stilurile de bază ale paginii pentru a nu crea confuzie și, pentru o mai mare claritate, am diluat câteva reguli cu comentarii:

/* Stiluri de bază pentru stratul de estompare și modal */ .overlay ( sus: 0; dreapta: 0; jos: 0; stânga: 0; z-index: 10; afișare: niciunul; /* Fade fundal */ background-color : rgba(0, 0, 0, 0,65 poziție: fixă ​​/* poziționare fixă ​​*/ cursor: implicit /* tip cursor */ . ) / * stiluri modale de fereastră */ .popup ( sus: -100%; dreapta: 0; stânga: 50%; dimensiunea fontului: 14px; z-index: 20; marginea: 0; lățime: 85%; lățime minimă : 320px ; max-width: 600px /* poziție fixă ​​la derulare */ poziție: fixed #383838 /* colțuri rotunjite: 4px-border; radius: 4px; -ms-border-radius: 4px font: 14px/18px "Tahoma", Arial, sans-serif: 0 15px 20px rgba(0,0,0,.22),0 19px; 60px rgba(0,0,0,.3); -moz-box-shadow: 0 15px 20px rgba(0,0 ,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transforma: translate(-50%, -500%); transforma: traduce(-50%, -500%); -webkit-tranziție: -webkit-transform 0.6s ease-out; -moz-tranziție: -moz-transform 0.6s ease-out; -o-tranziție: -o-transform 0.6s ease-out; tranziție: transformare 0.6s ease-out; ) /* activează blocul modal */ .overlay:target+.popup ( -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate ( -50%, 0); translate(-50%, 0: 20%) /* formează butonul de închidere */ .close ( sus: -10px; lățime: 20px; înălțime: 20px; bordura: 2px-radius: 15px; -box-shadow: 0px 0px 10px #000; .8s; -ms-tranziție: toate ușurința 255, 255, 255, 0. 9); conținut: „X”; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); dimensiunea fontului: 12px; ) .close:hover (culoare de fundal: rgba(252, 20, 0, 0,8); -webkit-transform: rotire(360deg); -moz-transform: rotire(360deg); -ms-transform: rotire(360deg) ; -o-transform: rotire(360deg); transform: rotire(360deg); -stânga, .pic-right ( lățime: 25%; înălțime: automat; ) .pic-left (float: stânga; margine: 5px 15px 5px 0; ) .pic-right ( float: dreapta; margine: 5px 0 5px 15px ; ) /* elemente m-media, cadre */ .popup embed, .popup iframe ( sus: 0; dreapta: 0; jos: 0; stânga: 0; afișare: bloc; margine: auto; lățime min.: 320px; lățime maximă: 600px; lățime: 100% .popup h2 ( /* antet 2 */ margine: 0; culoare: #008000; umplutură: 5px 0px 10px; text-align: text-shadow: 1px 1px 3px #; adadad; font-weight: 500 font-family: "Tahoma", Arial, sans-serif: 1.3 ) /* paragrafe */ .popup p (marja: 0; padding: 5px 0)

După cum puteți vedea, dragi prieteni, totul este destul de simplu și nu există confuzii inutile. Dacă faci totul corect, vei primi un instrument minunat în arsenalul tău, în care poți plasa orice conținut, fie că este vorba de conținut text, fotografii, diferite formulare de înregistrare și feedback, sau videoclipuri din orice sursă terță parte. Experimentați cu parametrii, modificați fereastra după cum doriți. Dacă este posibil, împărtășește-ți experiențele sau problemele care apar brusc în comentarii.

Adesea, chiar și foarte des, mi se pune întrebarea cum să opresc corect redarea video atunci când închid un mod. fereastră. Când închideți fereastra modală, redarea video din demonstrație se oprește. În demo am folosit evenimentul onclick pentru butonul de închidere a ferestrei, indicând adresa paginii demo în link, i.e. pagina pe care se află fereastra video:

Pur și simplu poți folosi un link cu un atribut href="" gol, în ambele cazuri pagina se reîncarcă și, în consecință, fereastra se închide și videoclipul se oprește, o cârjă desigur, dar nu există altă soluție mai eficientă și mai validă, fără conectând javascript, momentan nu sunt aici.

Cu API-ul JavaScript, puteți controla Playerul Chromeless și playerul încorporat YouTube folosind codul JavaScript. Pentru blocul nostru modal cu videoclip încorporat, js-ul executabil va fi astfel:

var player; function onYouTubePlayerAPIReady() ( player = new YT.Player("player"); ) $("#stop").click(function())( player.stopVideo() ))

Când faceți clic pe butonul cu id="stop", funcția va fi apelată, fereastra se va închide și redarea video se va opri.
Cu toate acestea, ar trebui să înțelegeți că pentru alte servicii video, dansul cu tamburine va fi diferit))). Deși există întotdeauna o alegere - să folosești pluginuri specializate gata făcute.

Designerii web și antreprenorii care locuiesc în țările vorbitoare de limbă rusă doresc probabil să poată folosi nu numai șabloane în limba engleză. De asemenea, vor să aibă acces la colecții de soluții gata făcute în limba rusă. Prin urmare, am dori să vă atragem atenția asupra celei mai noi secțiuni, care este acum prezentată pe piața TemplateMonster. Este de menționat că textul pentru fiecare dintre șabloane a fost scris manual. În plus, nu aveți nevoie de cunoștințe avansate de programare pentru a crea un proiect online impresionant.

Cu tot respectul, Andrew

O fereastră modală sau pop-up (numită diferit) este una foarte comună folosită pe un site web. Scopul său principal este de a afișa diverse informații (în mare parte text și, dacă sunt mai multe imagini), care apar atunci când dai clic pe un obiect special (link, buton sau fotografie).

În fereastra modală, în cele mai multe cazuri, pentru a economisi spațiu pe site, sunt scrise informații nu deosebit de importante, de exemplu: feedback, autorizare sau.

Există cazuri în care webmasterii doresc să atragă atenția vizitatorului asupra unui eveniment important, de exemplu: să primească bonusuri și cadouri, să participe la promoții și tombole etc., iar ferestrele modale apar fără participarea și dorința vizitatorului.

În aceste scopuri, cineva face o fereastră modală atunci când deschide o pagină, care apare pe pagină după o anumită perioadă de timp folosind un script java, desigur, în timp ce alții doresc să mențină vizitatorul pe site-ul lor în moduri diferite și utilizează un modal. fereastra la închiderea paginii, care apare în acel moment, când clientul dorește să părăsească și să închidă pagina.

Primul exemplu de fereastră modală pop-up.

Pentru a crea o fereastră modală folosind doar css, trebuie să scrieți cod html pentru un obiect de referință în fereastra pop-up și să atribuiți parametri și proprietăți în fișierul de stil pentru a afișa corect o fereastră modală frumoasă.

Titlul ferestrei modal

Iată informațiile text ale ferestrei modale...

Copiați, lipiți și salvați codul de mai sus într-un document text numit index.html și apoi deschideți-l în browser pentru a testa funcționalitatea ferestrei modale. Aici puteți ajusta, de asemenea, aspectul ferestrei modale în funcție de designul proiectului dumneavoastră.

De exemplu, pentru a afișa anumite informații folosesc adesea o fereastră modală cu diverse efecte de animație, care arată mult mai interesant.

În acest exemplu, voi arăta cum să înregistrez un buton pentru a deschide o fereastră modală.
Pentru a face acest lucru, trebuie doar să adăugăm atributul HTML onclick în codul pentru buton și pentru blocul de fereastră modală și, prin urmare, să apelăm o funcție cu un nume specific.

Un exemplu de buton pentru a deschide o fereastră modală (clic).

Butonul ferestrei modale

Apoi copiați și lipiți codul html al ferestrei modale:

Fereastra modală

Prima informație text...

A doua informație text...

Informații text ulterioare...

Și, în sfârșit, scrieți înainte de script pentru a apela și a închide fereastra modală:

Distribuiți prietenilor și puneți întrebări dacă ceva nu funcționează atunci când creați o fereastră modală.

În acest tutorial vom învăța cum să creați o fereastră modală folosind HTML5 și CSS3. În acest tutorial nu vom folosi JS, ci doar CSS3 complet. Ferestrele modale pot fi folosite pentru formularele de feedback, pentru fotografii și videoclipuri și există multe mai multe opțiuni pentru utilizarea acestuia.

Să începem să facem fereastra noastră modală.

Pasul 1: Markup HTML

În primul rând, trebuie să facem un marcaj HTML, adică. faceți un link care va deschide o fereastră și faceți un cadru pentru fereastra noastră. Pentru a face acest lucru scriem următorul cod:

Pasul 2. Conținutul ferestrei modale

Acum să adăugăm conținutul ferestrei noastre. Să facem un titlu și ceva text și să punem totul într-o etichetă și să le introducem în cod în loc de puncte suspensive. De asemenea, trebuie să inserăm un link care să închidă fereastra noastră și să-i dea class="close" . Iată cum ar trebui să arate codul dvs.:

REDSTAR este un proiect dedicat problemelor care te interesează de atâta timp. Acest proiect conține lecții gratuite și articole pe diverse subiecte. Subiectele sunt foarte diverse, variind de la simpla instalare Windows până la dezvoltarea site-ului web.

Pasul 3. Stiluri

Acum să începem să scriem stiluri pentru fereastra noastră. În acest pas ne vom face fereastra invizibilă. Va apărea doar când dați clic pe link. Pentru a face acest lucru, scriem stiluri pentru clasa noastră modalDialog:

ModalDialog ( 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;

Pasul 4. Funcționalitate și vizualizare

În acest pas ne vom asigura că fereastra noastră funcționează deja. Pentru a face acest lucru, să mai adăugăm câteva stiluri pentru clasa noastră modalDialog:

ModalDialog:target ( opacitate: 1; pointer-events: auto; display: block; ) .modalDialog > div ( lățime: 400px; poziție: relativă; margine: 10% automat; padding: 5px 20px 13px 20px; border-radius: 10px ; fundal: #fff: -moz-linear-gradient(#fff, #b8ecfb: -webkit-linear-gradient (#fff, #b8ecfb);

La acest pas vă puteți vizualiza deja fereastra, aceasta este deja funcțională. Dar butonul de închidere nu arată prea frumos.

Acum trebuie să adăugăm stiluri pentru clasa noastră apropiată.

Pasul 5. Realizarea unui buton de închidere

În acest pas vom îmbunătăți aspectul butonului nostru, care ne va închide fereastra. Pentru a face acest lucru, scriem stiluri pentru clasa noastră apropiată:

Î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 (fond: #860015;)

Ei bine, acum butonul nostru arată așa cum a fost intenționat. Ar trebui să arate așa pentru tine:

Aceasta încheie această lecție. Vă mulțumim pentru atenție! Pentru confortul dumneavoastră, am adăugat o versiune demo și fișiere sursă. Dacă ceva nu este clar, descărcați fișierele sursă.

Ferestrele modale sunt un instrument folosit frecvent în arsenalul unui webmaster. Este foarte potrivit pentru rezolvarea unui număr mare de sarcini, cum ar fi afișarea formularelor de înregistrare, blocuri de publicitate, mesaje și așa mai departe.

Dar, în ciuda locului lor important în suportul informațional al proiectului, ferestrele modale sunt de obicei implementate în JavaScript, ceea ce poate crea probleme la extinderea funcționalității sau la asigurarea compatibilității cu versiunea inversă.

HTML5 și CSS3 fac incredibil de ușor să creezi ferestre modale.

Primul pas către crearea unei ferestre modale este un marcaj simplu și eficient:

Deschideți fereastra modală

În interiorul unui element div Conținutul ferestrei modale este plasat. De asemenea, trebuie să furnizați un link pentru a închide fereastra. De exemplu, să plasăm un titlu simplu și mai multe paragrafe. Markupul complet pentru exemplul nostru ar arăta astfel:

Deschideți fereastra modală X Fereastra modală

Un exemplu de fereastră modală simplă care poate fi creată folosind CSS3.

Poate fi folosit într-o gamă largă, de la afișarea mesajelor până la înregistrarea formularelor.

Creați o clasă modalDialogși începeți să modelați aspectul:

ModalDialog ( 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;

Fereastra noastră va avea o poziție fixă, adică se va deplasa în jos dacă derulați pagina cu fereastra deschisă. De asemenea, fundalul nostru negru se va extinde pentru a umple întregul ecran.

Fundalul va avea o ușoară transparență și va fi, de asemenea, plasat deasupra tuturor celorlalte elemente prin utilizarea proprietății z-index.

În cele din urmă, setăm tranzițiile pentru afișarea ferestrei noastre modale și o ascundem într-o stare inactivă.

Poate nu cunoști proprietatea pointer-evenimente, dar vă permite să controlați modul în care elementele vor reacționa la clicurile mouse-ului. Setăm valoarea la valoarea sa pentru clasă modalDialog, deoarece linkul nu ar trebui să răspundă la clicurile mouse-ului când pseudo-clasa este activă ":ţintă".

Acum adăugăm o pseudo clasă :ţintăși stiluri pentru fereastra modală.

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); )

Pseudo clasă ţintă schimbă modul de afișare al elementului, astfel încât fereastra noastră modală va fi afișată atunci când se face clic pe link. Schimbăm și valoarea proprietății pointer-evenimente.

Definim lățimea și poziția ferestrei modale pe pagină. De asemenea, definim un gradient pentru fundal și colțurile rotunjite.

Acum trebuie să implementăm funcționalitatea de închidere a ferestrei. Formarea aspectului butonului:

Î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; )

Pentru butonul nostru setăm fundalul și poziția textului. Apoi poziționăm butonul, îl rotunjim folosind proprietatea de rotunjire a cadrului și formăm o umbră ușoară. Când treceți cursorul mouse-ului peste buton, vom schimba culoarea de fundal.