Modalni prozor u čistom CSS-u. Stvorite jQuery skočni modalni prozor

Moj prvi post.
Centriranje bloka u odnosu na drugi blok je relativno čest problem; ovo je još jedno rješenje za njega. Za mene je postao najuniverzalniji i pokriva sve slučajeve s kojima sam se ikada susreo.

Formulacija
Centrirajte modalni prozor vodoravno i okomito.

Uvjeti

• Modalne dimenzije mogu se naznačiti u bilo kojoj mjernoj jedinici. Ili možda uopće nisu navedeni.
• Responzivnost. Prilikom promjene veličine prozora, modal se prilagođava trenutnoj veličini.
• Ako je modal dizajniran na takav način da ima min-visinu/min-širinu, tada bi se prilikom promjene veličine prozora na manju veličinu trebao pojaviti pomicanje.
• IE 9+.
• Pozicioniranje treba implementirati u CSS-u, bez korištenja JS-a.

Kako se to radilo prije?
Ako su navedene dimenzije modalnog prozora, onda je sve jednostavno:

* ( box-sizing: border-box; ) .fixed-overlay ( position: fixed; overflow: auto; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0,0,0.5); ).modal (položaj: apsolutni; lijevo: 50%; vrh: 50%; margin-lijevo: -100px; margin-top: -75px; ) .modal_container (background-color: #fff; širina: 200px; visina: 150px; )
Radi super, nema zamjerki. Ali ova metoda nije prikladna za nas, jer ne želimo ovisiti o veličini modalnog prozora.

Prvu metodu koja zadovoljava sve navedene zahtjeve vidio sam kod Jabhera. Ovdje se radi o korištenju svojstva transformacije i njegove translate vrijednosti umjesto margine. Evo kako to funkcionira:

Modalni ( položaj: apsolutni; lijevo: 50%; vrh: 50%; transformacija: prevedi (-50%, -50%); ) .modal_container ( padding: 20px; boja pozadine: #fff; boja: #000; )
Magija! Sada ne ovisimo o dimenzijama.modal_container. To je zato što se prijevod temelji na veličini elementa na koji se svojstvo primjenjuje. Dopustite mi da vas podsjetim da će se postotne vrijednosti svojstva margine izračunati u odnosu na veličinu roditelja, što očito nije prikladno za nas.

Sada o nedostacima. Koristeći svojstvo transformacije, naići ćemo na renderiranje subpiksela. Jednostavno rečeno, sadržaj će se početi zamućivati ​​tijekom promjene veličine, rezultat će izgledati loše, to je posebno vidljivo kod renderiranja teksta i tankih linija, poput obruba od jednog piksela. Nisam mogao pronaći rješenja za ovaj problem, ako ih imate, podijelite ih u komentarima.

Tadaam Ne tako davno pronašao sam metodu koja je bila nevjerojatna u svojoj jednostavnosti. Inline blokovi žure pomoći. Mogu se jednostavno centrirati horizontalno dodjeljivanjem text-align: center roditelju. Nakon malo razmišljanja, sjetio sam se divnog svojstva okomitog poravnanja. Kako radi? Ako je ovo svojstvo postavljeno na sredinu, tada će elementi s ovim svojstvom biti centrirani okomito jedan u odnosu na drugi. To znači da osim elementa .modal, u .fixed-overlayu mora postojati još netko tko će pomoći našem modalu da stoji u središtu prozora. Visina ovog nekoga trebala bi biti jednaka visini.fixed-overlay. Za ulogu ovog pomagača predlaže se pseudoelement:

.fixed-overlay__modal ( text-align: center; white-space: nowrap; ) .fixed-overlay__modal::after ( display: inline-block; vertical-align: middle; width: 0; height: 100%; content: " "; ) .modal ( display: inline-block; vertical-align: middle; ) .modal_container ( margin: 50px; padding: 20px; min-width: 200px; text-align: left; white-space: normal; background- boja: #fff; boja: #000; )

Modalni prozori često su korišten alat u arsenalu webmastera. Vrlo je pogodan za rješavanje velikog broja zadataka, kao što su prikaz obrazaca za registraciju, oglasnih blokova, poruka i tako dalje.

No, unatoč svom važnom mjestu u informacijskoj potpori projekta, modalni prozori su obično implementirani u JavaScriptu, što može stvoriti probleme prilikom proširenja funkcionalnosti ili osiguravanja kompatibilnosti sa prethodnim verzijama.

HTML5 i CSS3 nevjerojatno olakšavaju stvaranje modalnih prozora.

HTML označavanje

Prvi korak prema stvaranju modalnog prozora je jednostavno i učinkovito označavanje:

Otvori modalni prozor

Unutar div elementa Smješten je sadržaj modalnog prozora. Također morate dati vezu za zatvaranje prozora. Na primjer, postavimo jednostavan naslov i nekoliko odlomaka. Potpuna oznaka za naš primjer izgledala bi ovako:

Otvaranje modalnog prozora X Modalni prozor

Primjer jednostavnog modalnog prozora koji se može stvoriti pomoću CSS3.

Može se koristiti u širokom rasponu, od prikaza poruka do obrazaca za registraciju.

Stilovi

Stvorite razred modalniDijalog i počnite oblikovati izgled:

ModalDialog ( pozicija: fiksna; obitelj fontova: Arial, Helvetica, sans-serif; vrh: 0; desno: 0; dolje: 0; lijevo: 0; pozadina: rgba(0,0,0,0.8); z-index : 99999; -webkit-transition: neprozirnost 400ms ease-in; -moz-transition: neprozirnost 400ms ease-in; prijelaz: neprozirnost 400ms ease-in; prikaz: ništa; događaji pokazivača: ništa; )

Naš prozor će imati fiksni položaj, odnosno pomicat će se prema dolje ako skrolate po stranici s otvorenim prozorom. Također, naša crna pozadina će se proširiti i ispuniti cijeli zaslon.

Pozadina će imati blagu prozirnost i također će biti postavljena na vrh svih ostalih elemenata korištenjem svojstva z-indeks.

Konačno, postavljamo prijelaze za prikaz našeg modalnog prozora i skrivamo ga u neaktivnom stanju.

Možda ne poznajete nekretninu pokazivač-događaji, ali vam omogućuje da kontrolirate kako će elementi reagirati na klikove mišem. Vrijednost postavljamo na njezinu vrijednost za klasu modalniDijalog, budući da veza ne bi trebala reagirati na klikove mišem kada je pseudo klasa aktivna ":cilj".

Sada dodajemo pseudo klasu :cilj i stilovi za modalni prozor.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff; pozadina: -moz-linearni-gradijent(#fff, #999); pozadina: -webkit-linearni-gradijent(#fff, #999); pozadina: -o-linearni-gradijent(#fff, #999); )

Pseudo klasa cilj mijenja način prikaza elementa, tako da će se naš modalni prozor prikazati kada se klikne na vezu. Također mijenjamo vrijednost imovine pokazivač-događaji.

Definiramo širinu i položaj modalnog prozora na stranici. Također definiramo gradijent za pozadinu i zaobljene kutove.

Zatvaranje prozora

Sada moramo implementirati funkciju zatvaranja prozora. Formiranje izgleda gumba:

Zatvori ( pozadina: #606061; boja: #FFFFFF; visina linije: 25px; pozicija: apsolutna; desno: -12px; poravnanje teksta: središte; vrh: -10px; širina: 24px; dekoracija teksta: ništa; font- težina: podebljano; -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 ( pozadina: #00d9ff; )

Za naš gumb postavljamo pozadinu i položaj teksta. Zatim pozicioniramo gumb, učinimo ga okruglim koristeći svojstvo zaokruživanja okvira i oblikujemo svijetlu sjenu. Kada prijeđete mišem preko gumba, promijenit ćemo boju pozadine.

U ovom vodiču naučit ćemo kako stvoriti modalni prozor koristeći HTML5 i CSS3. U ovom vodiču nećemo koristiti JS, samo puni CSS3. Modalni prozori mogu se koristiti za obrasce za povratne informacije, za fotografije i video zapise, a postoji još mnogo opcija za njihovu upotrebu.

Počnimo s izradom našeg modalnog prozora.

Korak 1: HTML označavanje

Prije svega, moramo napraviti HTML markup, tj. napraviti poveznicu koja će otvoriti prozor i napraviti okvir za naš prozor. Da bismo to učinili, napišemo sljedeći kod:

Korak 2. Sadržaj modalnog prozora

Sada dodajmo sadržaj našeg prozora. Napravimo naslov i neki tekst i sve to stavimo u tag i ubacimo u kod umjesto elipse. Također moramo umetnuti link koji će zatvoriti naš prozor i dati mu class="close" . Ovako bi vaš kod trebao izgledati:

PROJEKT CRVENA ZVIJEZDA

REDSTAR je projekt posvećen temama koje vas već dugo zanimaju. Ovaj projekt sadrži besplatne lekcije i članke o raznim temama. Teme su vrlo raznolike, u rasponu od jednostavne instalacije sustava Windows do razvoja web stranica.

Korak 3. Stilovi

Sada počnimo pisati stilove za naš prozor. U ovom koraku učinit ćemo naš prozor nevidljivim. Pojavit će se samo kada kliknete na poveznicu. Da bismo to učinili, pišemo stilove za našu klasu modalDialog:

ModalDialog ( pozicija: fiksna; obitelj fontova: Arial, Helvetica, sans-serif; vrh: 0; desno: 0; dolje: 0; lijevo: 0; pozadina: rgba(0,0,0,0.8); z-index : 99999; neprozirnost:0; -webkit-transition: neprozirnost 400ms lagano uvlačenje; -moz-prijelaz: neprozirnost 400ms lagano uvlačenje; prijelaz: neprozirnost 400ms lagano uvlačenje; prikaz: ništa; događaji pokazivača: ništa; )

Korak 4. Funkcionalnost i gledanje

U ovom koraku ćemo se uvjeriti da naš prozor već radi. Da bismo to učinili, dodajmo još nekoliko stilova za našu klasu modalDialog:

ModalDialog:target ( opacity:1; pointer-events: auto; display: block; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px ; pozadina: #fff; pozadina: -moz-linear-gradient(#fff, #b8ecfb); pozadina: -webkit-linear-gradient(#fff, #b8ecfb); pozadina: -o-linear-gradient(#fff, #b8ecfb); )

U ovom koraku već možete vidjeti svoj prozor, on već radi. Ali gumb za zatvaranje ne izgleda baš lijepo.

Sada moramo dodati stilove za naš bliski razred.

Korak 5. Izrada gumba za zatvaranje

U ovom koraku poboljšat ćemo izgled našeg gumba koji će zatvoriti naš prozor. Da bismo to učinili, pišemo stilove za našu blisku klasu:

Zatvori ( pozadina: #606061; boja: #FFFFFF; visina linije: 25px; pozicija: apsolutna; desno: -12px; poravnanje teksta: središte; vrh: -10px; širina: 24px; dekoracija teksta: ništa; font- težina: podebljano; -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 (pozadina: #860015;)

Pa, sada naš gumb izgleda onako kako je zamišljen. Za vas bi to trebalo izgledati ovako:

Ovo zaključuje ovu lekciju. Hvala na pozornosti! Radi vaše udobnosti, dodao sam demo verziju i izvorne datoteke. Ako nešto nije jasno, preuzmite izvorne datoteke.

Lekciju je za vas pripremio tim web stranice REDSTAR.

3. Primjer jQuery modalnog prozora pozvanog s veze (iz demonstracije)

Najvjerojatnije ste već više puta vidjeli skočni modalni prozor na Internetu - potvrda registracije, upozorenje, referentne informacije, preuzimanje datoteke i još mnogo toga. U ovom tutorialu ponudit ću nekoliko primjera kako stvoriti najjednostavnije modalne prozore.

Stvaranje jednostavnog skočnog modalnog prozora Počnimo gledati kod za jednostavan modalni prozor koji će se odmah pojaviti
jQuery kod

$(dokument).spreman(funkcija()
{
upozorenje("Tekst u skočnom prozoru");
});

Zalijepite kôd bilo gdje u tijelo stranice. Odmah nakon učitavanja stranice, bez ikakvih naredbi, vidjet ćete prozor koji izgleda ovako:

Ali sljedeći kod će se izvršiti nakon što se cijela stranica učita u preglednik. U našem primjeru, nakon učitavanja stranice sa slikama, pojavit će se jednostavan skočni prozor:

$(prozor).load(funkcija()
{
upozorenje("Učitavanje stranice je dovršeno!)");
});

Pozivanje jQuery modalnog prozora iz veze pomoću CSS-a Sljedeći korak je stvaranje modalnog prozora kada se klikne na vezu. Pozadina će polako potamniti.

Često možete vidjeti da se obrasci za prijavu i registraciju nalaze u takvim prozorima. Primimo se posla

Prvo, napišimo html dio. Ovaj kod postavljamo u tijelo vašeg dokumenta.

Pozivanje modalnog prozora

Tekst modalnog prozora
Zatvoriti
Tekst u modalnom prozoru.

CSS kod. Ili u zasebnoj css datoteci ili u glavi.

tijelo (
obitelj-fontova:verdana;
veličina fonta:15px;
}
.link (boja:#fff; text-decoration:none)
.link:hover (boja:#fff; text-decoration:underline)
#maska ​​(
pozicija: apsolutna;
lijevo:0;
vrh:0;
z-indeks:9000;
boja pozadine:#000;
prikaz: ništa;
}
#boxes.window (
pozicija: apsolutna;
lijevo:0;
vrh:0px;
-gore: 40px;
širina:440px;
visina:200px;
prikaz: ništa;
z-indeks:9999;
ispuna: 20px;
preljev: skriven;
}
#kutije #dijalog (
širina:375px;
visina:203px;
padding:10px;
boja pozadine:#ffffff;
}
.vrh(
pozicija: apsolutna;
lijevo:0;
vrh:0;
širina:370px;
visina:30px;
pozadina: #0085cc;
ispuna: 8px 20px 6px 10px;
}
.Zatvoriti(
float:desno;
}
.sadržaj(
padding-top: 35px;
}

U jQuery kodu fokusirat ćemo se na položaj modalnog prozora i maske, u našem slučaju na postupno tamnjenje pozadine.

Pažnja! Ne zaboravite uključiti knjižnicu u glavu dokumenta!

Povezivanje knjižnice s Google web stranice. Pa, sam jQuery kod.

jQuery kod

$(dokument).ready(funkcija() (
$("a").click(function(e) (
e.preventDefault();
var id = $(ovo).attr("href");
var maskHeight = $(dokument).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#maska").fadeIn(1000);
$("#maska").fadeTo("sporo",0,8);
var winH = $(prozor).visina();
var winW = $(prozor).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("lijevo", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#maska, .prozor").hide();
});
$("#mask").click(function () (
$(ovo).sakrij();
$(".prozor").sakrij();
});
});