Fereastra modală în CSS pur. Creați o fereastră jQuery Popup Modal

Prima mea postare.
Centrarea unui bloc în raport cu un alt bloc este o problemă relativ comună; aceasta este încă o soluție pentru aceasta. Pentru mine, a devenit cel mai universal și acoperă toate cazurile pe care le-am întâlnit vreodată.

Formulare
Centrați fereastra modală orizontal și vertical.

Condiții

• Dimensiunile modale pot fi indicate în orice unitate de măsură. Sau s-ar putea să nu fie specificate deloc.
• Receptivitatea. La redimensionarea ferestrei, modalul se adaptează la dimensiunea curentă.
• Dacă modalul este proiectat în așa fel încât să aibă o înălțime minimă/lățime minimă, atunci când redimensionați fereastra la o dimensiune mai mică, ar trebui să apară un derulare.
• IE 9+.
• Poziționarea ar trebui implementată în CSS, fără a utiliza JS.

Cum se făcea asta înainte?
Dacă sunt specificate dimensiunile ferestrei modale, atunci totul este simplu:

* ( dimensiunea casetei: border-box; ) .fixed-overlay (poziție: fix; overflow: automat; stânga: 0; sus: 0; lățime: 100%; înălțime: 100%; fundal-culoare: rgba(0, 0,0,0.5); ).modal (poziție: absolut; stânga: 50%; sus: 50%; margin-left: -100px; margin-top: -75px; ) .modal_container ( background-color: #fff; lățime: 200px; înălțime: 150px; )
Funcționează excelent, fără plângeri. Dar această metodă nu este potrivită pentru noi, deoarece nu vrem să depindem de dimensiunea ferestrei modale.

Am văzut prima metodă care satisface toate cerințele enumerate de la Jabher. Este vorba despre utilizarea proprietății de transformare și a valorii sale de translație în loc de margine. Iată cum funcționează:

Modal ( poziție: absolut; stânga: 50%; sus: 50%; transform: translate(-50%, -50%); ) .modal_container ( padding: 20px; background-color: #fff; culoare: #000; )
Magie! Acum nu suntem dependenți de dimensiunile.modal_container. Acest lucru se datorează faptului că translate se bazează pe dimensiunea elementului căruia i se aplică proprietatea. Permiteți-mi să vă reamintesc că valorile procentuale ale proprietății marjei vor fi calculate în raport cu dimensiunea părintelui, ceea ce în mod clar nu este potrivit pentru noi.

Acum despre contra. Folosind proprietatea transform, vom întâlni randarea subpixelilor. Pur și simplu, conținutul va începe să se estompeze în timpul redimensionării, rezultatul va arăta rău, acest lucru este vizibil mai ales atunci când redați text și linii subțiri, cum ar fi chenarele de un pixel. Nu am putut găsi soluții la această problemă, dacă le aveți, vă rugăm să le împărtășiți în comentarii.

Tadaam Nu cu mult timp în urmă am găsit o metodă uimitoare prin simplitatea ei. Blocurile inline se grăbesc să ajute. Ele pot fi centrate cu ușurință pe orizontală prin atribuirea text-align: center la părinte. După ce m-am gândit puțin, mi-am amintit de minunata proprietate vertical-align. Cum functioneazã? Dacă această proprietate este setată la mijloc, atunci elementele cu această proprietate vor fi centrate vertical unul față de celălalt. Aceasta înseamnă că, pe lângă elementul .modal, trebuie să existe altcineva în .fixed-overlay care să ne ajute modalul să stea în centrul ferestrei. Înălțimea acestui cineva ar trebui să fie egală cu înălțimea.fixed-overlay. Un pseudo-element se sugerează pentru rolul acestui ajutor:

.fixed-overlay__modal ( text-align: center; white-space: nowrap; ) .fixed-overlay__modal::after ( afișare: inline-block; vertical-align: middle; lățime: 0; înălțime: 100%; conținut: " "; ) .modal (afișare: inline-block; vertical-align: middle; ) .modal_container (margine: 50px; padding: 20px; min-width: 200px; text-align: left; spatiu alb: normal; fundal- culoare: #fff; culoare: #000; )

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.

Marcaj HTML

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.

Stiluri

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; -moz-transition: opacitate 400ms ease-in; tranziție: opacitate 400ms ease-in; afișare: niciunul; pointer-evenimente: niciunul; )

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); fundal: -webkit-linear-gradient(#fff, #999); fundal: -o-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.

Închiderea ferestrei

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: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close: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 mouse-ul peste buton, vom schimba culoarea de fundal.

Î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 tău:

PROIECT REDSTAR

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 faceț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; opacitate:0; -webkit-transition: opacitate 400ms ease-in; -moz-transition: opacitate 400ms ease-in; tranziție: opacitate 400ms ease-in; afișare: niciunul; pointer-evenimente: niciunul; )

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; fundal: -moz-linear-gradient(#fff, #b8ecfb); fundal: -webkit-linear-gradient(#fff, #b8ecfb); fundal: -o-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: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; .close: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ă.

Lecția a fost pregătită pentru tine de echipa site-ului REDSTAR.

3. Exemplu de fereastră jQuery modală apelată dintr-un link (din Demo)

Cel mai probabil, ați văzut deja o fereastră pop-up modală pe Internet de mai multe ori - confirmare de înregistrare, avertisment, informații de referință, 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.

Crearea unei ferestre modale pop-up simple Să începem să ne uităm la cod pentru o fereastră modală simplă care va apărea imediat
Cod jQuery

$(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ă este încărcată în browser. În exemplul nostru, după încărcarea paginii cu imagini, va apărea o fereastră pop-up simplă:

$(window).load(function()
{
alert("Încărcarea paginii s-a încheiat!)");
});

Apelarea unei ferestre modale jQuery dintr-o legătură cu CSS Următorul pas este să creați o fereastră modală atunci când se face clic pe link. Fundalul se va întuneca încet.

Puteți vedea adesea că formularele de autentificare și înregistrare se află în astfel de ferestre. Sa trecem la treaba

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

Apelarea unei ferestre modale

Textul ferestrei modal
Închide
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;
afisare:niciuna;
}
#boxes.window (
poziție: absolut;
stânga:0;
sus:0px;
-sus: 40px;
lățime: 440px;
înălțime: 200px;
afisare:niciuna;
indicele z: 9999;
umplutură: 20px;
preaplin: ascuns;
}
#cutii #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;
}
.închide(
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();
});
});