, sa određenim sadržajem unutra i dugmetom "Zatvori", generisan isključivo pomoću css-a.

Otvori prozor 1 Otvori prozor 2 Video u prozoru 3 Fotografija u prozoru 4

U gornjem primjeru koda, radi jasnoće, napisao sam kratka objašnjenja u kontejnerima modalnih prozora. Ostaje vam po analogiji, u div kontejner iskačući prozor, postavite bilo koji vaš sadržaj, bilo da se radi o jednostavnom tekstu, slikama ili video zapisima sa bilo kojeg izvora treće strane, YouTube, Vimeo, itd. Veze za pozivanje modalnih prozora, možete napraviti tekst, ili ih možete dizajnirati u obliku prekrasnih, gradijent gumba, kao u primjeru.

Korak 2. CSS

Sljedeći korak, ovo je najzanimljiviji, važno je pripremiti sve potrebne stilove za naš modalni prozor, urediti izgled i dodati funkcionalnost. Izostavio sam osnovne stilove stranice kako ne bih zbunio, a dodao sam neke komentare s komentarima radi jasnoće:

/ * Osnovni stilovi zatamnjenja i modalnog sloja * / .overlay (gore: 0; desno: 0; dolje: 0; lijevo: 0; z-indeks: 1; vidljivost: skriveno; / * zatamnjena pozadina * / boja pozadine: rgba (0, 0, 0, 0,7); neprozirnost: 0; pozicija: fiksna; / * fiksno pozicioniranje * / kursor: zadano; / * tip kursora * / -webkit-transition: neprozirnost .5s; -moz-transition: neprozirnost . 5s; -ms-transition: neprozirnost .5s; -o-transition: neprozirnost .5s; prijelaz: neprozirnost .5s;) .overlay: cilj (vidljivost: vidljiv; neprozirnost: 1;) .is-image (vrh: 0 ; desno: 0; dolje: 0; lijevo: 0; prikaz: blok; margina: auto; širina: 100%; visina: auto; / * zaokruživanje uglova inline slika * / -webkit-border-radius: 4px; -moz - radijus granice: 4px; -ms-radijus granice: 4px; radijus granice: 4px;) / * ugrađeni elementi m-medija, okviri * / embed, iframe (gore: 0; desno: 0; dole: 0; lijevo : 0; prikaz: blok; margina: auto; minimalna širina: 320px; maksimalna širina: 600px; širina: 100%;) .popup h1 (/ * naslov 1 * / boja: # 008000; poravnanje teksta: lijevo sjena teksta: 0 1p x 3px rgba (0,0,0, .3); font: 24px "Trebuchet MS", Helvetica, sans-serif; font-weight: bold; ) .popup h2 (/ * naslov 2 * / boja: # 008000; text-align: lijevo; text-shadow: 0 1px 3px rgba (0,0,0, .3); font: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Modalni stilovi prozora obrasca *** / .popup (gore: 0; desno: 0; lijevo: 0; veličina fonta: 14px; z-indeks: 10; prikaz: blok; vidljivost : skriveno; margina: 0 auto; širina: 90%; minimalna širina: 320px; maksimalna širina: 600px; / * fiksno pozicioniranje, prozor je stabilan pri pomicanju * / pozicija: fiksna; padding: 15px; granica: 1px čvrsta # 383838 ; / * zaokruživanje uglova * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * vanjska box-shadow * / -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); / * puna transparentnost prozora, pojavljuje se na klik * / neprozirnost: 0; / * efekat prijelaza (pojavljuje se) * / -webkit-transiti uključeno: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s; tranzicija: all ease .5s; ) / * omogućite pojavljivanje prozora i zatamnite pozadinu * / .overlay: target + .popup (vrh: 20%; / * pozicija prozora od vrha stranice kada se pojavi * / vidljivost: vidljiva; neprozirnost: 1; / * uklonite prozirnost * /) / * formirajte dugme za zatvaranje * / .close (pozicija: apsolutna; vrh: -10px; desno: -10px; padding: 0; širina: 20px; visina: 20px; ivica: 2px čvrsta #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; boja pozadine: rgba (61, 61, 61, 0. osam); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text-align: centar; dekoracija teksta: nema; font-weight: bold; visina linije: 20px; / * postavite vrijednosti i efekt prijelaza pri lebdenju * / -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: sve lakoće .8s; -o-transition: all ease .8s; tranzicija: all ease .8s; ) .close: prije (boja: rgba (255, 255, 255, 0.9); sadržaj: "X"; sjena teksta: 0 -1px rgba (0, 0, 0, 0.9); veličina fonta: 12px;) .close: lebdjeti (boja pozadine: rgba (252, 20, 0, 0.8); / * okrenite dugme pri lebdenju * / -webkit-transform: rotirajte (360 stepeni); -moz-transform: rotirajte (360 stepeni); - ms -transform: rotirati (360 stupnjeva); -o-transform: rotirati (360 stupnjeva); transformirati: rotirati (360 stupnjeva);) / * opcionalno pri dodavanju priloga * / .popup p, .popup div (margin-bottom: 10px;)

Kao što možete vidjeti dragi prijatelji, sve je prilično jednostavno i bez nepotrebnog miješanja. Ako sve uradite kako treba, dobit ćete u svom arsenalu prekrasan modalni pop-up prozor u koji možete postaviti bilo koji sadržaj, bilo da se radi o tekstualnom sadržaju, fotografijama, raznim formularima za registraciju i povratne informacije, ili video s bilo kojeg izvora treće strane. Eksperimentirajte s parametrima, modificirajte prozor kako vam srce želi i, ako je moguće, podijelite svoje najbolje prakse, kao i probleme koji se iznenada pojavljuju, u komentarima.

Danas su za razne sajtove sve vrste iskačućih modalnih prozora - iskačućih prozora - za registraciju, autorizaciju, informacioni prozori, - sve vrste oblika i veličina postali norma. Postoji i ogroman broj dodataka osim jQueryja za jednostavno i zgodna kreacija takvi iskačući prozori - isti Shadowbox, na primjer.

Izgled, veličina i dizajn ovakvih iskačućih prozora su potpuno raznoliki - s preklapanjem, sjenama, animacijama - bezbroj. Ono što ih spaja je, možda, činjenica da se obično prikazuju u samom centru stranice – i horizontalno i okomito. A centriranje se vrši pomoću JS-a. Neću ulaziti u detalje ovih proračuna, samo ću ih ukratko opisati:

Popup HTML kod obično ima sljedeću strukturu:

- Skočni prozor sa sadržajem ->

I CSS ( ovdje i dolje ću namjerno izostaviti pisanje nekih svojstava koja su neophodna samo za neke pretraživače i njihove verzije, ostavljajući samo najosnovnije):

Popup__overlay (
pozicija: fiksna;
lijevo: 0;
vrh: 0;
pozadina: # 000;
neprozirnost: .5;
filter: alfa (prozirnost = 50);
z-indeks: 999
}
.iskočiti (
pozicija: apsolutna;
širina: 20%;
z-indeks: 1000;
granica: 1px čvrsta #ccc;
pozadina: #fff
}

JS određuje pretraživač i verziju pretraživača i na osnovu toga izračunava veličinu radnog područja i veličinu samog iskačućeg prozora (ako nisu specificirani), a zatim se jednostavno izračunava pozicija njegovog gornjeg lijevog ugla izvršeno (css-osobine lijevo i gore za .popup). Mnogi dodaci također reaguju na promjenu veličine stranice, preračunavajući cijelu stvar svaki put tako da se popup nalazi tačno u centru radnog prostora.

Ja sam perfekcionista po prirodi (znam, ponekad je loše) i često se zamaram čak i malim detaljima, pokušavajući da poboljšam i dodam maksimalnu moguću proširivost tim detaljima, i nisam mogao a da se ne navučem baš na ovaj trenutak u rad svih ovih dodataka. Pojavila se misao da se sav posao na pozicioniranju popup-a može prebaciti sa ramena JS-a na ramena samog pretraživača, odnosno da se ovaj posao može obaviti pomoću CSS-a.

Ovo ćemo uraditi.

U nastavku ću dati primjer iskačućeg prozora koji radi u svim glavnim verzijama glavnih pretraživača. Da bi ispravno funkcionisao u IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Dakle, imamo stranicu sa dugmetom na koje treba da iskoči modalni prozor sa nekim informacijama, a sav ostali sadržaj bi trebao biti zasjenjen preklapanjem.

Počnimo s HTML kodom. Njegova struktura će se malo razlikovati od gore navedenog koda, zašto - više o tome u nastavku članka; klase elemenata će ostati iste:

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

I malo CSS-a:

Popup__overlay (
pozicija: fiksna;
lijevo: 0;
vrh: 0;
širina: 100%;
visina: 100%;
z-indeks: 999
}
.iskočiti (
}

Fiksne veličine

Najlakša opcija. Ne morate da izmišljate ništa novo:

Iskočiti (
lijevo: 50%;
vrh: 50%;
širina: 400px;
visina: 200px;
margin-left: -200px;
margin-top: -100px
}

Negativne margine pola širine i visine su trivijalne i dosadne, ništa originalno u tome.

Veličine iskačućih prozora zavise od sadržaja

Prvo, čini se da je horizontalno poravnanje lakše. Ako je skočni prozor fiksne širine, tada će biti dovoljno sljedeće:

Iskočiti (
margina: auto
}

Ovo ni na koji način neće uticati na vertikalno poravnanje, a, usput rečeno, ako vam je potrebno samo horizontalno poravnanje, možete se zaustaviti na tome tako što ćete navesti neku drugu gornju marginu skočnog prozora. Ali ovo nam nije dovoljno! Pomakni se.

Vertikalno poravnanje. Ovdje postaje zanimljivo. Naravno, tabela ili emulacija tabele koja koristi display: table & display: table-cell bez problema bi se nosila sa takvim zadatkom, ali to raditi u starom IE je skuplje. Tabela također nestaje - iz očiglednih razloga.

Dakle, margina već nedostaje - ne znamo veličine. Prisjetimo se koja su svojstva sa sličnim efektima. Da, poravnajte tekst. Ali samo za inline elemente. UREDU. Čini se da je sam Bog naredio upotrebu prikaza: inline-block - blok element na koji se mogu primijeniti svojstva za inline elemente. Uz podršku ovog svojstva u svim pretraživačima, takođe, sve je, moglo bi se reći, u redu. Kod postaje otprilike ovako:

Popup__overlay (
pozicija: fiksna;
lijevo: 0;
vrh: 0;
širina: 100%;
visina: 100%;
z-indeks: 999;
text-align: centar
}
.iskočiti (
prikaz: inline -block;
vertikalno poravnanje: sredina
}

Ostaje okomito poravnanje - vertikalno poravnanje je u redu za nas. U bilo kojoj drugoj situaciji, također bi bilo prikladno koristiti line-height, ali pošto nemamo fiksnu visinu stranice (line-height u ovom kontekstu), ne možemo je koristiti ovdje. Jedan trik dolazi u pomoć s vertikalnim poravnavanjem elemenata nepoznatih veličina. Tačno se sjećam da sam ovu metodu pronašao na Habréu, ali, nažalost, nisam mogao pronaći link na tu temu. Ova metoda se sastoji u sljedećem: dodaje se inline-block element nulte širine i 100% visine nadređenog, koji "proširuje" visinu reda na 100% visine roditelja, odnosno na visinu rada stranice području. Učinimo to elegantnijim korištenjem pseudoelemenata umjesto nepotrebnih oznaka:

Popup__overlay: nakon (
prikaz: inline -block;
širina: 0;
visina: 100%;
vertikalno poravnanje: sredina;
sadržaj: ""
}

Ostaje dodati poluprozirno zatamnjenje sloja - rgba će to riješiti. Sve! Sada poziciju iskačućeg prozora kontroliše samo pretraživač na CSS nivou.

U ovoj lekciji neću otkriti tajnu za iskusne layout dizajnere i css gurue, ali ovaj će članak biti koristan za početnike. ovo je mjesto gdje možete naučiti kako kreirati iskačuće prozore na vrhu cijele vaše web stranice.

Najčešće se takvi prozori pojavljuju nakon izvođenja određenih radnji na web-mjestu, na primjer, korisnik klikne na vezu "Zatraži povratni poziv" i pred njim se pojavi obrazac za narudžbu.

Vrlo je zgodno koristiti PopUp prozore u sprezi sa ajaxom, ali ovo je tema za drugu lekciju.

Sve više i više web resursa počinje da se pojavljuje na webu koji koriste iskačuće prozore. Svi znaju kao primjer. društvene mreže... Svi nepotrebni podaci sa snimaka ekrana su uklonjeni.

U kontaktu sa

Facebook

Twitter

Mislim da ima dovoljno razloga da počnete proučavati pitanje: kako napraviti pop-up pop-up na svojoj web stranici.

Izjava o problemu (TOR)

Morate kreirati iskačući prozor sa zamračenim ekranom na vrhu cijele stranice.

Rješenje

Metoda 1

html

css

* (porodica fontova: Areal;) .b-kontejner (širina: 200px; visina: 150px; boja pozadine: #ccc; margina: 0px auto; padding: 10px; veličina fonta: 30px; boja: #fff;) .b-skočni prozor (širina: 100%; visina: 2000px; boja pozadine: rgba (0,0,0,0.5); prelijevanje: skriveno; pozicija: fiksna; vrh: 0px;) .b-popup .b-popup -content (margina: 40px auto 0px auto; širina: 100px; visina: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

rezultat:

Vrlo često se preporučuje upotreba:

Pozicija: apsolutna;
Da, rezultat je isti, ali zbog činjenice da smo postavili visinu bloka "senčenja", pojavljuju se trake za pomeranje. Zato ova metoda nije prikladna.

Metoda 2

Ova metoda se ne razlikuje dramatično od metode 1, ali smatram da je zgodnija.

HTML (nepromijenjen)

Css

* (porodica fonta: Areal;) .b-kontejner (širina: 200px; visina: 150px; boja pozadine: #ccc; margina: 0px auto; padding: 10px; veličina fonta: 30px; boja: #fff;) .b-skočni prozor (širina: 100%; min-visina: 100%; boja pozadine: rgba (0,0,0,0.5); prelijevanje: skriveno; pozicija: fiksna; vrh: 0px;) .b-popup. b-popup-content (margina: 40px auto 0px auto; širina: 100px; visina: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Rezultat je sličan

Hvala imovini: min-visina: 100%; naš blok "tamnjenje" je stekao širinu od 100% i minimalna visina na 100% ekrana.

Jedini nedostatak ovu metodu je li to Internet Explorer podržava ovo svojstvo samo od verzije 8.0.

Dodavanje magije u Jquery

Sada dodajmo linkove da sakrijemo/prikažemo naš popup.

Da biste to učinili, morate povezati JQuery biblioteku i malu skriptu:

Također je potrebno ažurirati HTML:

Rezultat

Sada, kada se stranica učita, PopUp će nestati.

Rezultat možete vidjeti ovdje.

U ovoj lekciji neću otkriti tajnu za iskusne layout dizajnere i css gurue, ali ovaj će članak biti koristan za početnike. ovo je mjesto gdje možete naučiti kako kreirati iskačuće prozore na vrhu cijele vaše web stranice.

Najčešće se takvi prozori pojavljuju nakon izvođenja određenih radnji na web-mjestu, na primjer, korisnik klikne na vezu "Zatraži povratni poziv" i pred njim se pojavi obrazac za narudžbu.

Vrlo je zgodno koristiti PopUp prozore u sprezi sa ajaxom, ali ovo je tema za drugu lekciju.

Sve više i više web resursa počinje da se pojavljuje na webu koji koriste iskačuće prozore. Primjer su poznate društvene mreže. Svi nepotrebni podaci sa snimaka ekrana su uklonjeni.

U kontaktu sa

Facebook

Twitter

Mislim da ima dovoljno razloga da počnete proučavati pitanje: kako napraviti pop-up pop-up na svojoj web stranici.

Izjava o problemu (TOR)

Morate kreirati iskačući prozor sa zamračenim ekranom na vrhu cijele stranice.

Rješenje

Metoda 1

html

css

* (porodica fontova: Areal;) .b-kontejner (širina: 200px; visina: 150px; boja pozadine: #ccc; margina: 0px auto; padding: 10px; veličina fonta: 30px; boja: #fff;) .b-skočni prozor (širina: 100%; visina: 2000px; boja pozadine: rgba (0,0,0,0.5); prelijevanje: skriveno; pozicija: fiksna; vrh: 0px;) .b-popup .b-popup -content (margina: 40px auto 0px auto; širina: 100px; visina: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

rezultat:

Vrlo često se preporučuje upotreba:

Pozicija: apsolutna;
Da, rezultat je isti, ali zbog činjenice da smo postavili visinu bloka "senčenja", pojavljuju se trake za pomeranje. Zato ova metoda nije prikladna.

Metoda 2

Ova metoda se ne razlikuje dramatično od metode 1, ali smatram da je zgodnija.

HTML (nepromijenjen)

Css

* (porodica fonta: Areal;) .b-kontejner (širina: 200px; visina: 150px; boja pozadine: #ccc; margina: 0px auto; padding: 10px; veličina fonta: 30px; boja: #fff;) .b-skočni prozor (širina: 100%; min-visina: 100%; boja pozadine: rgba (0,0,0,0.5); prelijevanje: skriveno; pozicija: fiksna; vrh: 0px;) .b-popup. b-popup-content (margina: 40px auto 0px auto; širina: 100px; visina: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Rezultat je sličan

Hvala imovini: min-visina: 100%; naš blok "tamnjenje" je stekao širinu od 100% i minimalna visina na 100% ekrana.

Jedini nedostatak ove metode je što Internet Explorer podržava ovo svojstvo samo od verzije 8.0.

Dodavanje magije u Jquery

Sada dodajmo linkove da sakrijemo/prikažemo naš popup.

Da biste to učinili, morate povezati JQuery biblioteku i malu skriptu:

Također je potrebno ažurirati HTML:

Rezultat

Sada, kada se stranica učita, PopUp će nestati.

Rezultat možete vidjeti ovdje.

Modalni prozor koji je jednostavan u smislu funkcija, koji se u potpunosti izvodi u čistom CSS-u, gdje možete staviti različite funkcije koje će biti pozvane na web mjestu. Vjerovatno je ovo jedan od mnogih koje sam sreo u izboru modalnih prozora, u smislu njegovih postavki prostate, ali i za instalaciju. Ali glavna stvar je njegova funkcionalnost, koja neće biti inferiorna u odnosu na druge. Takođe, podrazumevano se radi pod svetlom nijansom, gde u desnoj gornji ugao dugme je postavljeno, u obliku krsta.

Što će ići na disable funkciju ili samo da okvir nestane, pri čemu i na ovom malom elementu postoji efekat na promjenu palete boja. Sada ga webmaster može staviti na stranicu i postaviti opis ili operatore u nju, koji mogu prikazati različite kategorije, poput statistike ili informatora.

Ali činjenica je da ako imate tamni stil resursa, tada u stilu možete brzo promijeniti ljestvicu, odnosno prilagoditi je izvornom dizajnu. Evo jednog od standardne metode kako to učiniti čisti css u modalni prozor koji će se pokrenuti kada se klikne na dugme ispod veze sa HTML sidrom. Samo dugme ide više za vidljivost, gde u stilovima, uklanjanjem jedne klase ostaje i naziv, koji se može staviti u navigaciju ili u kontrolni panel, gde se nalazi glavna funkcionalnost ili navigacija sajta.

Ovo je kada provjerite da li sve radi kako treba:

Početak instalacije:

Prozor sa dugmetom

CSS

Butksaton-satokavate (
prikaz: inline-block;
dekoracija teksta: nema;
margin-desno: 7px;
radijus granice: 5px;
padding: 7px 9px;
pozadina: # 199a36;
boja: # fbf7f7!
}

anelumen (
displej: flex;
pozicija: fiksna;
lijevo: 0;
vrh: -100%;
širina: 100%;
visina: 100%;
align-items: centar;
justify-content: centar;
neprozirnost: 0;
-webkit-transition: vrh 0s .7s, neprozirnost .7s 0s;
prijelaz: vrh 0s .7s, neprozirnost .7s 0s;
}

Anelumen: cilj (
vrh: 0;
neprozirnost: 1;
-webkit-transition: nema;
tranzicija: nema;
}

Figura anelumena (
širina: 100%;
maks. širina: 530px;
položaj: relativan;
padding: 1.8em;
neprozirnost: 0;
boja pozadine: bijela;
-webkit-transition: neprozirnost .7s;
prijelaz: neprozirnost .7s;
}

Anelumen.lowingnuska figura (
pozadina: # f9f5f5;
radijus granice: 7px;
padding-top: 8px;
granica: 3px solid #aaabad;
}

Anelumen.lowingnuska slika h2 (
margin-top: 0;
padding-bottom: 3px;
border-bottom: 1px solid # dcd7d7;
}

Anelumen: ciljna figura (
neprozirnost: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
dekoracija teksta: nema;
pozicija: apsolutna;
desno: 8px;
vrh: 0px;
veličina fonta: 41px;
}

Anelumen .nedismiseg (
lijevo: 0;
vrh: 0;
širina: 100%;
visina: 100%;
pozicija: fiksna;
boja pozadine: rgba (10, 10, 10, 0.87);
sadržaj: "";
kursor: default;
vidljivost: skrivena;
-webkit-transition: sve .7s;
prijelaz: sve .7s;
}

Anelumen: target .nedismiseg (
vidljivost: vidljiva;
}

Također morate biti svjesni da je CSS stil i pseudo-klasa jedan od onih koje CSS karakteristike ne koriste u potpunosti s mnogo zanimljivih potencijalnih aplikacija.

Počinje kada Url stranica odgovara identifikatoru svog elementa, ili ga možete drugačije izraziti, to je kada korisnik skoči na određeni element na stranici.