Čisti CSS modal. Kako kreirati jQuery popup modal

Moj prvi post.
Centriranje bloka u odnosu na drugi blok je relativno čest zadatak; ovo je njegovo sljedeće rješenje. Za mene je postao najsvestraniji i pokriva sve slučajeve s kojima sam se ikada susreo.

Formulacija
Centrirajte modal vodoravno i okomito.

Uslovi

• Modalk dimenzije se mogu specificirati u bilo kojoj mjernoj jedinici. Ili možda uopće nisu specificirani.
• Responsiveness. Kada se promijeni veličina prozora, modal se mijenja na trenutnu veličinu.
• Ako je modal postavljen tako da ima minimalnu visinu/minimalnu širinu, tada bi se trebao pojaviti skrol kada se veličina prozora promijeni na manju veličinu.
• IE 9+.
• Pozicioniranje treba obaviti u CSS-u, bez upotrebe JS-a.

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

* (dimenzija kutije: okvir-kutija;) .fixed-overlay (pozicija: fiksna; preljev: auto; lijevo: 0; vrh: 0; širina: 100%; visina: 100%; boja pozadine: rgba (0, 0,0,0.5);) .modal (pozicija: apsolutna; lijevo: 50%; vrh: 50%; margin-lijevo: -100px; margin-top: -75px;) .modal_container (boja pozadine: #fff; širina: 200px; visina: 150px;)
Radi odlično, bez zamjerki. Ali ova metoda nam ne odgovara, jer ne želimo ovisiti o veličini modalnog prozora.

U Jabheru sam vidio prvu metodu koja ispunjava sve navedene zahtjeve. Ovdje se radi o korištenju svojstva transformacije i njegove translate vrijednosti umjesto margine. Ovako to funkcionira:

Modalni (položaj: apsolutna; lijevo: 50%; vrh: 50%; transformacija: prevedi (-50%, -50%);). Modalni_container (padding: 20px; boja pozadine: #fff; boja: # 000;)
Magic! Sada ne ovisimo o dimenzijama.modal_container. To je zato što se translate zasniva na veličini elementa na koji se svojstvo primjenjuje. Da vas podsjetim da će se procentualne vrijednosti svojstva margine izračunavati u odnosu na veličinu nadređenog, što nam očito ne odgovara.

Sada o nedostacima. Koristeći svojstvo transformacije, suočit ćemo se s renderiranjem podpiksela. Jednostavno rečeno, sadržaj će početi da se zamagljuje pri promjeni veličine, rezultat izgleda loše, posebno pri renderiranju teksta i tankih linija, poput ivica od jednog piksela. Nisam mogao pronaći rješenja za ovaj problem, ako ih imate - podijelite ih u komentarima.

Tadaam

Ne tako davno sam pronašao metodu koja je zadivljujuća po svojoj jednostavnosti. Inline blokovi žure u pomoć. Lako ih je centrirati vodoravno preklapanjem text-align: centar na roditelj. Nakon malog razmišljanja, sjetio sam se predivnog svojstva vertikalnog poravnanja. Kako to radi? Ako je ovo svojstvo postavljeno na sredinu, tada će elementi s ovim svojstvom biti okomito centrirani. jedni prema drugima... To znači da pored elementa .modal, mora postojati još neko u .fixed-overlayu koji će pomoći našem modalnom da centrira prozor. Visina ovog nekoga mora biti jednaka visini .fixed-overlay. Pseudoelement traži ulogu ovog pomagača:

.fixed-overlay__modal (text-align: center; white-space: nowrap;) .fixed-overlay__modal :: nakon (prikaz: inline-block; vertikalno poravnanje: sredina; širina: 0; visina: 100%; sadržaj: " ";) .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;)

Modali su često korišteni alat u arsenalu webmastera. Vrlo je pogodan za rješavanje velikog broja zadataka, kao što su prikazivanje obrazaca za registraciju, oglasne jedinice, poruke itd.

No, uprkos važnom mjestu u informacijskoj podršci projekta, modali se obično implementiraju u JavaScript-u, što može stvoriti probleme pri proširenju funkcionalnosti ili pružanju kompatibilnosti unatrag.

HTML5 i CSS3 vam omogućavaju da kreirate modale sa izuzetnom lakoćom.

HTML markup

Prvi korak ka kreiranju modalnog je jednostavno i efikasno označavanje:

Otvorite modalni prozor

Unutar elementa div sadržaj modala je postavljen. Također morate organizirati vezu za zatvaranje prozora. Na primjer, postavimo jednostavan naslov i nekoliko pasusa. Kompletna oznaka za naš primjer bi izgledala ovako:

Otvorite modalni prozor

Stilovi

Kreirajte klasu modalDialog i počinjemo oblikovati izgled:

ModalDialog (pozicija: fiksna; porodica fontova: Arial, Helvetica, sans-serif; gore: 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: nema; pokazivač-događaji: nema;)

Naš prozor će imati fiksnu poziciju, odnosno pomjeraće se prema dolje ako skrolujete po stranici dok je prozor otvoren. Također, naša crna pozadina će se proširiti da popuni cijeli ekran.

Pozadina će imati malu prozirnost, a također će biti pozicionirana na vrhu svih ostalih elemenata korištenjem svojstva z-indeks.

Konačno, postavili smo prijelaze za prikaz našeg modalnog prozora i sakrili ga u neaktivnom stanju.

Možda ne poznajete imovinu pokazivač-događaji, ali vam omogućava da kontrolirate kako elementi reagiraju na klik mišem. Postavljamo vrijednost na njenu vrijednost za klasu modalDialog, jer veza ne bi trebala reagirati na klikove miša kada je pseudo klasa aktivna “: Cilj”.

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

ModalDialog: cilj (prikaz: blok; pokazivač-događaji: auto;). ModalDialog> div (širina: 400px; pozicija: relativna; margina: 10% auto; padding: 5px 20px 13px 20px; granica radijusa: 10px; pozadina: # fff; pozadina: -moz-linear-gradient (#fff, # 999); pozadina: -webkit-linear-gradient (#fff, # 999); pozadina: -o-linear-gradient (#fff, # 999); )

Pseudo klasa cilj mijenja način prikaza elementa, tako da će naš modal biti prikazan kada se klikne na vezu. Također mijenjamo vrijednost nekretnine pokazivač-događaji.

Definiramo širinu modala i poziciju na stranici. Također definirajte gradijent za pozadinu i zaobljene uglove.

Zatvorite prozor

Sada moramo implementirati funkcionalnost zatvaranja prozora. Formiramo izgled dugmeta:

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

Za naše dugme postavljamo pozadinu i poziciju teksta. Zatim pozicioniramo dugme, napravimo ga okruglim koristeći svojstvo zaokruživanja okvira i formiramo suptilnu senku. Kada pređete kursorom miša preko dugmeta, promenićemo boju pozadine.

U ovom vodiču ćemo naučiti kako napraviti modalni prozor koristeći HTML5 i CSS3. Nećemo koristiti JS u ovom tutorijalu, samo potpuno CSS3. Modali se mogu koristiti za formulare za povratne informacije, za fotografije i video zapise, a postoji mnogo više načina za korištenje.

Počnimo da pravimo naš modalni prozor.

Korak 1. HTML markiranje

Prvo što treba da uradimo je HTML markiranje, tj. napravimo link na kojem će se otvoriti prozor i napraviti kostur našeg prozora. Da biste to učinili, napišite sljedeći kod:

Korak 2. Sadržaj modalnog prozora

Sada dodajmo sadržaj samog našeg prozora. Napravimo naslov i neki tekst i sve to stavimo u tag