, cu un anumit conținut în interior și un buton „Închidere”, generat exclusiv prin intermediul css.

Deschideți fereastra 1 Deschideți fereastra 2 Video în fereastră 3 Fotografie în fereastra 4

În exemplul de cod de mai sus, pentru claritate, am scris explicații scurte în containerele ferestrelor modale. Vă rămâne prin analogie, în container div fereastră pop-up, plasați orice conținut, fie că este vorba de text simplu, imagini sau videoclipuri din orice resursă terță parte, YouTube, Vimeo etc. Legăturile către ferestrele modale de apel pot fi făcute text sau le puteți proiecta sub formă de butoane minunate, de gradient, ca în exemplu.

Pasul 2. CSS

Următorul pas, acesta este cel mai interesant, este important să pregătim toate stilurile necesare pentru fereastra noastră modală, aranjați aspectși adăugați funcționalitate. Am omis stilurile de bază ale paginii pentru a nu confunda și am adăugat câteva comentarii la unele reguli pentru claritate:

/ * Stiluri de bază de oprire și de moduri de strat * / .overlay (sus: 0; dreapta: 0; jos: 0; stânga: 0; index-z: 1; vizibilitate: ascuns; / * fundal oprit * / fundal-culoare: rgba (0, 0, 0, 0.7); opacitate: 0; poziție: fixă; / * poziționare fixă ​​* / cursor: implicit; / * tip cursor * / -webkit-transition: opacity .5s; -moz-transition: opacity. 5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;) .overlay: target (vizibilitate: vizibil; opacity: 1;) .is-image (top: 0; dreapta: 0; jos: 0; stânga: 0; afișare: bloc; marjă: automată; lățime: 100%; înălțime: automată; / * rotunjirea colțurilor imaginilor în linie * / -webkit-border-radius: 4px; -moz - border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * elemente m-media încorporate, cadre * / embed, iframe (sus: 0; dreapta: 0; jos: 0; stânga: 0; afișare: bloc; marjă: auto; lățime minimă: 320px; lățime maximă: 600px; lățime: 100%;). popup h1 (/ * titlu 1 * / culoare: # 008000; text-align: left ; text-umbră: 0 1p x 3px rgba (0,0,0, .3); font: 24px "Trebuchet MS", Helvetica, sans-serif; font-weight: bold; ) .popup h2 (/ * titlu 2 * / culoare: # 008000; text-align: left; text-shadow: 0 1px 3px rgba (0,0,0, .3); font: 22px "Trebuchet MS", Helvetica ; : ascuns; marjă: 0 automată; lățime: 90%; lățime minimă: 320 px; lățime maximă: 600 px; / * poziționare fixă, fereastra este stabilă la derulare * / poziție: fixă; umplutură: 15 px; margine: 1 px solid # 383838; / * colțuri rotunjite * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * umbră cutie exterioară * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -ms -box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba (0 , 0, 0, 0.8); / * transparență completă a ferestrei, care apare pe clic * / opacitate: 0; / * efect de tranziție (care apare) * / -webkit-transiti pe: toată ușurința .5s; -moz-tranzitie: toate usurinta .5s; -ms-transition: toate ușurința .5s; -o-tranziție: toate ușurința .5s; tranziție: toate ușurința .5s; ) / * activați fereastra să apară și întunecă fundalul * / .overlay: target + .popup (sus: 20%; / * poziția ferestrei din partea de sus a paginii când apare * / vizibilitate: vizibilă; opacitate: 1; / * elimina transparența * /) / * formează butonul de închidere * / .close (poziție: absolut; sus: -10px; dreapta: -10px; umplutură: 0; lățime: 20px; înălțime: 20px; bordură: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0. opt); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text-align: centru; decor-text: nici unul; font-weight: bold; înălțimea liniei: 20 px; / * setați valorile și efectul de tranziție pe hover * / -webkit-transition: toate ușor .8s; -moz-tranziție: toate ușurința .8s; -ms-transition: toate ușurința .8s; -o-tranziție: toate ușurința .8s; tranziție: toată ușurința .8s; ) .close: before (culoare: rgba (255, 255, 255, 0.9); conținut: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); font-size: 12px;) .close: hover (fundal-culoare: rgba (252, 20, 0, 0,8); / * răsuciți butonul pe hover * / -webkit-transformare: rotire (360deg); -moz-transformare: rotire (360deg); - ms -transform: rotate (360deg); -o-transform: rotate (360deg); transform: rotate (360deg);) / * opțional la adăugarea atașamentelor * / .popup p, .popup div (marginea-jos: 10px;)

După cum puteți vedea dragi prieteni, totul este destul de simplu și nu are amestec inutil. Dacă faceți totul corect, veți obține în arsenalul dvs. o fereastră pop-up modală minunată în care puteți plasa orice conținut, fie el conținut text, fotografii, diverse formulare de înregistrare și părere, sau videoclip din orice sursă terță parte. Experimentați cu parametrii, modificați fereastra după dorința inimii și, dacă este posibil, împărtășiți cele mai bune practici, precum și problemele care apar brusc, în comentarii.

În zilele noastre, pentru diverse site-uri, tot felul de ferestre de tip pop-up - ferestre pop-up - pentru înregistrare, autorizare, ferestre de informații - toate tipurile de forme și dimensiuni au devenit normă. Există, de asemenea, un număr mare de pluginuri în afară de jQuery pentru simplu și creație convenabilă astfel de ferestre pop-up - aceeași Shadowbox, de exemplu.

Aspectul, dimensiunea și designul unor astfel de ferestre pop-up sunt complet variate - cu suprapunere, umbre, animații - nenumărate. Ceea ce îi unește este, probabil, faptul că sunt de obicei afișate chiar în centrul paginii - atât pe orizontală, cât și pe verticală. Și centrarea se face prin intermediul JS. Nu voi intra în detaliile acestor calcule, le voi descrie doar pe scurt:

Codul HTML pop-up are de obicei următoarea structură:

- Popup cu conținut ->

Și CSS ( aici și mai jos, voi omite în mod deliberat scrierea unor proprietăți care sunt necesare numai pentru unele browsere și versiunile lor, lăsând doar cele mai elementare):

Popup__overlay (
poziție: fixă;
stânga: 0;
sus: 0;
fundal: # 000;
opacitate: .5;
filtru: alfa (opacitate = 50);
Z-index: 999
}
.Pop-up (
poziție: absolută;
lățime: 20%;
indice z: 1000;
border: 1px solid #ccc;
fundal: #fff
}

JS determină browserul și versiunea browserului și, pe baza acestuia, calculează dimensiunea zonei de lucru și dimensiunea pop-up-ului în sine (dacă nu sunt specificate), iar apoi se efectuează calcule simple ale poziției colțului său din stânga sus (proprietăți css stânga și sus pentru .popup). Multe pluginuri reacționează, de asemenea, la redimensionarea paginii, recalculând totul de fiecare dată, astfel încât fereastra pop-up să fie localizată exact în centrul spațiului de lucru.

Sunt un perfecționist din fire (știu, uneori este rău) și mă deranjez adesea chiar și cu mici detalii, încercând să îmbunătățesc și să adaug extensibilitatea maximă la aceste detalii și nu m-am putut abține să nu fiu legat de acest moment. în activitatea tuturor acestor pluginuri. A apărut gândul că toată munca de poziționare a ferestrei popup poate fi mutată de pe umerii JS pe umerii browserului în sine, adică această lucrare poate fi realizată folosind CSS.

Asta vom face.

Mai jos voi oferi un exemplu de popup care funcționează în toate versiunile majore ale browserelor majore. Pentru a-l face să funcționeze corect în IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Deci, avem o pagină cu un buton, când faceți clic pe care ar trebui să apară fereastra modală cu unele informații și orice alt conținut ar trebui să fie umbrit cu o suprapunere.

Să începem cu codul HTML. Structura sa va diferi ușor de codul indicat mai sus, de ce - mai multe despre acest lucru mai jos în articol; clasele de elemente vor rămâne aceleași:

< div class ="popup__overlay">
< div class ="popup">

Și câteva CSS:

Popup__overlay (
poziție: fixă;
stânga: 0;
sus: 0;
lățime: 100%;
înălțime: 100%;
Z-index: 999
}
.Pop-up (
}

Dimensiuni fixe

Cea mai ușoară opțiune. Nu trebuie să inventezi nimic nou:

Pop-up (
stânga: 50%;
top: 50%;
lățime: 400px;
înălțime: 200px;
margine-stânga: -200px;
marginea-sus: -100px
}

Marjele negative la jumătate din lățime și înălțime sunt banale și plictisitoare, nimic original în acest sens.

Dimensiunile pop-up depind de conținut

În primul rând, alinierea orizontală pare a fi mai ușoară. Dacă fereastra popup are o lățime fixă, atunci vor fi suficiente următoarele:

Pop-up (
margine: auto
}

Acest lucru nu va afecta în niciun fel alinierea verticală și, apropo, dacă aveți nevoie doar de o aliniere orizontală, vă puteți opri acolo specificând o altă marjă superioară a ferestrei popup. Dar acest lucru nu este suficient pentru noi! Mergi mai departe.

Aliniere verticală. Aici devine interesant. Desigur, un tabel sau o emulare a unui tabel folosind display: table & display: table-cell ar face față unei astfel de sarcini fără probleme, dar a face acest lucru în vechiul IE este mai scump. De asemenea, tabelul dispare - din motive evidente.

Deci, marja lipsește deja - nu cunoaștem dimensiunile. Să ne amintim care sunt proprietățile cu efecte similare. Da, aliniați textul. Dar numai pentru elemente inline. BINE. Se pare că Dumnezeu însuși a ordonat utilizarea afișajului: inline-block - un element de bloc pe care s-ar putea aplica proprietăți pentru elementele inline. Cu sprijinul acestei proprietăți și în toate browserele, totul, s-ar putea spune, este în regulă. Codul devine așa:

Popup__overlay (
poziție: fixă;
stânga: 0;
sus: 0;
lățime: 100%;
înălțime: 100%;
index z: 999;
text-align: centru
}
.Pop-up (
display: inline -block;
vertical-align: mijloc
}

Rămâne alinierea verticală - alinierea verticală este bună pentru noi. În orice altă situație, ar fi, de asemenea, adecvat să se utilizeze înălțimea liniei, dar din moment ce nu avem o înălțime fixă ​​a paginii (înălțimea liniei în acest context), nu poate fi utilizată aici. Un truc vine în ajutor cu alinierea verticală a elementelor de dimensiuni necunoscute. Îmi amintesc exact că am găsit această metodă pe Habré, dar, din păcate, nu am putut găsi un link către subiectul respectiv. Această metodă constă în următoarele: se adaugă un element in-bloc cu lățimea zero și înălțimea de 100% a părintelui, care „extinde” înălțimea liniei la 100% din înălțimea părintelui, adică la înălțimea zonei de lucru a paginii. Să-l facem mai elegant folosind pseudo-elemente în loc de marcaje inutile:

Popup__overlay: după (
display: inline -block;
lățime: 0;
înălțime: 100%;
vertical-align: mijloc;
conținut: ""
}

Rămâne să adăugați o acoperire semi-transparentă întunecată - rgba se va ocupa de acest lucru. Tot! Acum poziția ferestrei pop-up este controlată numai prin intermediul browserului la nivel CSS.

În această lecție, nu voi dezvălui un secret pentru proiectanții de layout experimentați și guru CSS, dar acest articol va fi util pentru începători. aici puteți afla cum să creați ferestre pop-up pe întregul site.

Cel mai adesea, astfel de ferestre apar după efectuarea anumitor acțiuni pe site, de exemplu, utilizatorul face clic pe linkul „Solicitați un apel înapoi” și un formular de comandă apare în fața sa.

Este foarte convenabil să utilizați ferestrele PopUp împreună cu ajax, dar acesta este un subiect pentru o altă lecție.

Tot mai multe resurse web încep să apară pe web care utilizează ferestre pop-up PopUp. Toată lumea știe ca exemplu. retele sociale... Toate datele inutile din capturi de ecran au fost eliminate.

În contact cu

Facebook

Stare de nervozitate

Cred că există suficiente motive pentru a începe studierea întrebării: cum să faci un pop-up pop-up pe site-ul tău.

Declarație de problemă (TOR)

Trebuie să creați o fereastră pop-up cu un ecran de estompare deasupra întregului site.

Soluţie

Metoda 1

html

css

* (font-family: Areal;) .b-container (lățime: 200px; înălțime: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (lățime: 100%; înălțime: 2000px; fundal-culoare: rgba (0,0,0,0,5); depășire: ascuns; poziție: fix; sus: 0px;) .b-popup .b-popup -contenut (marjă: 40 px auto 0 px automat; lățime: 100 px; înălțime: 40 px; umplutură: 10 px; culoarea fundalului: # c5c5c5; raza chenarului: 5 px; umbră cutie: 0 px 0 px 10 px # 000;)

Rezultat:

Foarte des se sugerează utilizarea:

Poziție: absolută;
Da, rezultatul este același, dar datorită faptului că am setat înălțimea blocului „umbrire”, apar bare de defilare. De aceea această metodă nu este potrivită.

Metoda 2

Această metodă nu diferă dramatic de Metoda 1, dar mi se pare mai convenabilă.

Html (neschimbat)

Css

* (font-family: Areal;) .b-container (lățime: 200px; înălțime: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (lățime: 100%; înălțime minimă: 100%; culoare de fundal: rgba (0,0,0,0,5); depășire: ascuns; poziție: fixă; sus: 0px;) .b-popup. b-popup-content (margine: 40 px automată 0 px automată; lățime: 100 px; înălțime: 40 px; umplutură: 10 px; culoare de fundal: # c5c5c5; raza chenarului: 5 px; umbră cutie: 0 px 0 px 10 px # 000;)

Rezultatul este similar

Datorită proprietății: min-înălțime: 100%; blocul nostru „întunecat” a căpătat o lățime de 100% și înălțimea minimăîn 100% din ecran.

Singurul dezavantaj aceasta metoda este asta Internet Explorer acceptă această proprietate numai de la versiunea 8.0.

Adăugarea magiei la Jquery

Acum să adăugăm linkuri pentru a ascunde / afișa fereastra noastră de tip pop-up.

Pentru a face acest lucru, trebuie să conectați biblioteca JQuery și un mic script:

De asemenea, HTML trebuie actualizat:

Rezultat

Acum, când pagina se încarcă, PopUp va dispărea.

Rezultatul îl puteți vedea aici.

În această lecție, nu voi dezvălui un secret pentru proiectanții de layout experimentați și guru CSS, dar acest articol va fi util pentru începători. aici puteți afla cum să creați ferestre pop-up pe întregul site.

Cel mai adesea, astfel de ferestre apar după efectuarea anumitor acțiuni pe site, de exemplu, utilizatorul face clic pe linkul „Solicitați un apel înapoi” și un formular de comandă apare în fața sa.

Este foarte convenabil să utilizați ferestrele PopUp împreună cu ajax, dar acesta este un subiect pentru o altă lecție.

Tot mai multe resurse web încep să apară pe web care utilizează ferestre pop-up PopUp. Un exemplu este rețelele sociale familiare. Toate datele inutile din capturi de ecran au fost eliminate.

În contact cu

Facebook

Stare de nervozitate

Cred că există suficiente motive pentru a începe studierea întrebării: cum să faci un pop-up pop-up pe site-ul tău.

Declarație de problemă (TOR)

Trebuie să creați o fereastră pop-up cu un ecran de estompare deasupra întregului site.

Soluţie

Metoda 1

html

css

* (font-family: Areal;) .b-container (lățime: 200px; înălțime: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (lățime: 100%; înălțime: 2000px; fundal-culoare: rgba (0,0,0,0,5); depășire: ascuns; poziție: fix; sus: 0px;) .b-popup .b-popup -contenut (marjă: 40 px auto 0 px automat; lățime: 100 px; înălțime: 40 px; umplutură: 10 px; culoarea fundalului: # c5c5c5; raza chenarului: 5 px; umbră cutie: 0 px 0 px 10 px # 000;)

Rezultat:

Foarte des se sugerează utilizarea:

Poziție: absolută;
Da, rezultatul este același, dar datorită faptului că am setat înălțimea blocului „umbrire”, apar bare de defilare. De aceea această metodă nu este potrivită.

Metoda 2

Această metodă nu diferă dramatic de Metoda 1, dar mi se pare mai convenabilă.

Html (neschimbat)

Css

* (font-family: Areal;) .b-container (lățime: 200px; înălțime: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (lățime: 100%; înălțime minimă: 100%; culoare de fundal: rgba (0,0,0,0,5); depășire: ascuns; poziție: fixă; sus: 0px;) .b-popup. b-popup-content (margine: 40 px automată 0 px automată; lățime: 100 px; înălțime: 40 px; umplutură: 10 px; culoare de fundal: # c5c5c5; raza chenarului: 5 px; umbră cutie: 0 px 0 px 10 px # 000;)

Rezultatul este similar

Datorită proprietății: min-înălțime: 100%; blocul nostru „întunecat” a căpătat o lățime de 100% și înălțimea minimăîn 100% din ecran.

Singurul dezavantaj al acestei metode este că Internet Explorer acceptă această proprietate numai de la versiunea 8.0.

Adăugarea magiei la Jquery

Acum să adăugăm linkuri pentru a ascunde / afișa fereastra noastră de tip pop-up.

Pentru a face acest lucru, trebuie să conectați biblioteca JQuery și un mic script:

De asemenea, HTML trebuie actualizat:

Rezultat

Acum, când pagina se încarcă, PopUp va dispărea.

Rezultatul îl puteți vedea aici.

O fereastră modală care este simplă în ceea ce privește funcțiile, care este complet executată în CSS pur, unde puteți pune sub diferite funcții pentru a fi apelate pe site. Acesta este probabil unul dintre multele pe care le-am întâlnit din selecția modurilor, în ceea ce privește setările sale de prostată, dar și pentru instalare. Dar principalul este funcționalitatea sa, care nu va fi inferioară celorlalți. De asemenea, în mod implicit, este realizat sub o umbră deschisă, în dreapta colțul superior butonul este setat, sub forma unei cruci.

Care va merge la funcția de dezactivare sau doar pentru a face ca cadrul să dispară, unde chiar și pe acest mic element există un efect asupra schimbării paletei de culori. Acum, webmasterul îl poate pune pe site și poate plasa o descriere sau operatori, care pot afișa diferite categorii, cum ar fi statistici sau informatori.

Faptul este că, dacă aveți un stil întunecat al resursei, atunci în stil puteți schimba rapid scala sau, mai bine zis, o puteți ajusta la designul original. Iată una dintre metode standard cum se face pur css la fereastra modală care va fi lansată când se face clic pe buton sub linkul cu ancoră HTML. Butonul în sine merge mai mult pentru vizibilitate, unde în stiluri, eliminarea unei clase și numele vor rămâne, care poate fi pus în navigare sau în panoul de control, unde se află funcționalitatea principală sau navigarea pe site.

Aceasta este atunci când verificați dacă totul funcționează bine:

Noțiuni introductive despre instalare:

Fereastra cu buton

CSS

Butksaton-satokavate (
afișaj: bloc în linie;
decor-text: nici unul;
margine-dreapta: 7px;
raza chenarului: 5px;
umplutură: 7px 9px;
fundal: # 199a36;
culoare: # fbf7f7! important;
}

Anelumen (
display: flex;
poziție: fixă;
stânga: 0;
top: -100%;
lățime: 100%;
înălțime: 100%;
align-items: centru;
justify-content: centru;
opacitate: 0;
-webkit-tranziție: top 0s .7s, opacitate .7s 0s;
tranziție: top 0s .7s, opacitate .7s 0s;
}

Anelumen: țintă (
sus: 0;
opacitate: 1;
-webkit-tranziție: nici unul;
tranziție: niciuna;
}

Figura anelumen (
lățime: 100%;
lățime maximă: 530 px;
poziție: relativă;
căptușeală: 1,8em;
opacitate: 0;
culoare de fundal: alb;
-webkit-tranziție: opacitate .7s;
tranziție: opacitate .7s;
}

Anelumen.lowingnuska figura (
fundal: # f9f5f5;
raza chenarului: 7px;
căptușeală: 8 px;
border: 3px solid #aaabad;
}

Anelumen.lowingnuska figura h2 (
marginea-sus: 0;
fund de umplutură: 3 px;
border-bottom: 1px solid # dcd7d7;
}

Anelumen: cifră țintă (
opacitate: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
decor-text: nici unul;
poziție: absolută;
dreapta: 8px;
sus: 0px;
dimensiunea fontului: 41px;
}

Anelumen .nedismiseg (
stânga: 0;
sus: 0;
lățime: 100%;
înălțime: 100%;
poziție: fixă;
culoare de fundal: rgba (10, 10, 10, 0,87);
conținut: "";
cursor: implicit;
vizibilitate: ascuns;
-webkit-tranziție: toate .7s;
tranziție: toate .7s;
}

Anelumen: target .nedismiseg (
vizibilitate: vizibil;
}

De asemenea, trebuie să fiți conștienți de faptul că stilul și pseudo-clasa CSS este unul dintre cele care nu sunt pe deplin utilizate de caracteristicile CSS cu multe aplicații potențiale interesante.

Începe când Url pagina se potrivește cu identificatorul elementului său sau îl puteți pune diferit, atunci când utilizatorul sare la un anumit element de pe pagină.