Kako napraviti modalni prozor html. Kako napraviti modalni prozor sa css-om

Ovo dovršava kreiranje jednostavnog iskačućeg prozora.

Da kreirate iskačući modalni prozor, uzmite element, dizajnirajte ga i dodajte link, kada kliknete na njega, pojavit će se:

Naslov dokumenta #okno ( širina: 300px; visina: 50px; poravnanje teksta: centar; padding: 15px; ivica: 3px čvrsta #0000cc; granica-radijus: 10px; boja: #0000cc; prikaz: nema; pozicija: apsolutna; vrh : 0 desno: 0 margina: auto ) #prozor: cilj; Poziv iskačući

Sljedeći korak u kreiranju punopravnog modalnog prozora je dodavanje dugmeta koje će sakriti naš prozor. Napravit ćemo dugme od običnog linka, dodati ga našem i dizajnirati ga:

Naslov dokumenta #okno ( širina: 300px; visina: 50px; poravnanje teksta: centar; padding: 15px; ivica: 3px čvrsta #0000cc; granica-radijus: 10px; boja: #0000cc; prikaz: nema; pozicija: apsolutna; vrh : 0 : 0 ; ; ; ; ; ; ; : #e6e6ff;)
Zatvori prozor Pozovi iskačući prozor Pokušajte »

Za efekat zatamnjivanja stranice prilikom prikaza modalnog prozora, potrebno je da sav postojeći kod prozora postavite u dodatni:

Pop-up prozor!
Zatvori prozor

Postavite roditeljski i rastegnite ga na cijelu širinu i visinu prozora. Postavljamo prikaz: nema; i preusmjerite link za poziv prozora na njega.

Za dijete, uklonite ekran: nema; (više nije potreban jer će roditelj sakriti sve u njemu). Kao rezultat toga, roditelj je sada odgovoran za prikaz modalnog prozora i zatamnjivanje pozadine stranice, a dijete je odgovorno samo za ukrašavanje samog prozora:

Naslov dokumenta #zatemnenie ( pozadina: rgba(102, 102, 102, 0.5); širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo: 0; prikaz: nema; ) #okno ( širina: 300px text-align: 10px left: 0.000%; granica: 1px, boja: #0000cc;
Zatvori prozor Pozovi iskačući prozor Pokušajte »

Napomena: ako vam je potrebno da korisnik odmah vidi iskačući prozor pri ulasku na stranicu (a ne da ga poziva preko linka), tada će adresu stranice morati unijeti zajedno sa ID-om prozora (na primjer, adresa može izgleda ovako: site.ru/papka/documet html#window).

Još jednom se okrećem temi kreiranja modalnih (skočnih) prozora. U posljednje vrijeme me sve više zanimaju razne tehnike za izvršavanje pop-up prozora, bez korištenja javascripta, jQuery dodataka itd. Od većeg interesa je mogućnost korištenja čistih stilova i neiscrpni potencijal novih funkcija.
Na osnovu razvoja nekih uglednih buržuja, oni su lukavi momci u tom pogledu, postižu dobre rezultate u smislu kreiranja modalnih prozora koristeći CSS3. Zadatak je, prije svega, postići koliko-toliko stabilnu cross-browser kompatibilnost konačnog rezultata, i naravno, uz najmanje gubitke, smanjiti ukupnu količinu koda, kako u HTML-u tako iu CSS-u, kako bi se olakšati život napaćenim radnicima izrade web stranica.
Šta će se na kraju desiti, imam u vezi sa tim danas, videćemo, a istovremeno ćemo naučiti kako da napravimo iskačuće modalne prozore koristeći „magiju“ CSS3.

Ažurirano: 27.10.2017

Za početak, svi koji su zainteresirani za ovu temu, možete pogledati primjer kako modalni prozori rade u različitim verzijama i preuzeti izvore:

Ovu lekciju ne treba uzimati kao vodič za akciju, jer je u ovoj fazi bilo moguće postići pouzdanu podršku samo modernim pretraživačima (IE 9+, Firefox, Safari, Opera, Chrome). S obzirom da su drevne verzije IE pretraživača još uvijek prilično popularne među korisnicima, preporučujem da ovaj članak gledate kao svojevrsni eksperiment, demonstraciju mogućnosti CSS3.

U redu, sada idemo direktno na stvarni izgled html koda i stiliziranje našeg modalnog prozora koristeći css3)))

Prvo, napravimo neke osnovne HTML oznake. Kao što vidite, osnovni dizajn je prilično jednostavan, ako uzmemo u obzir html oznaku modalnih prozora i dugmadi (linkova) za njihovo aktiviranje. Svaki modalni prozor nije ništa drugo do standardni kontejner, sa određenim sadržajem unutra i dugmetom „Zatvori“, formiranim isključivo pomoću CSS-a.

Otvori prozor 1 Otvori prozor 2 Video u prozoru 3 Fotografija u prozoru 4 Ovdje možete postaviti bilo koji sadržaj, tekst sa slikama ili video zapisima! Naslov Ovdje ubacujete svoj video ili sa bilo kojeg izvora treće strane, YouTube, Vimeo, itd. (iframe, embed)...

U gornjem primjeru koda, radi jasnoće, napisao sam kratka objašnjenja u kontejnerima modalnih prozora. Po analogiji, jednostavno morate postaviti bilo koji svoj sadržaj u div kontejner iskačućeg prozora, bilo da se radi o jednostavnom tekstu, slikama ili video zapisima sa bilo kojeg drugog izvora, YouTube, Vimeo, itd. Možete napraviti veze za pozivanje modalnog teksta prozora ili ih formatirati u obliku, kao u primjeru.

Sljedeći korak, ovo je najzanimljivija stvar, važno je pripremiti sve potrebne stilove za naš modalni prozor, dizajnirati izgled i dodati funkcionalnost. Izostavio sam osnovne stilove stranica kako ne bih izazivao zabunu, a radi veće jasnoće razrijedio sam neka pravila komentarima:

/* Osnovni stilovi za bledi sloj i modalni */ .overlay (gore: 0; desno: 0; dole: 0; lijevo: 0; z-indeks: 10; prikaz: nema; /* blijedi pozadina */ boja pozadine : rgba(0, 0, 0, 0.65): fiksno pozicioniranje */ kursor: default /* tip kursora */ .overlay: cilj; ) / * modalni stilovi prozora */ .popup ( gore: -100%; desno: 0; lijevo: 50%; veličina fonta: 14px; z-indeks: 20; margina: 0; širina: 85%; min-širina : 320px , max-width: 600px, stabilna pozicija: 1px solid #383838 /* -webkit-border-radius: -moz-border-; radijus: 4px; font: 14px/18px; 60px rgba(0,0,0,.3) -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transform: translate(-50%, -500%); transform: translate(-50%, -500%); -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; tranzicija: transformacija 0.6s ease-out; ) /* aktivirati modalni blok */ .overlay:target+.popup ( -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: prevesti ( -50%, 0): translate(-50%, 0%: 20% ) /* formirajte dugme za zatvaranje */ .close (gore: -10px; širina: 20px); visina: 20px; 15px; -box-shadow: 0px 0px 10px #000: font: 13px/20px -moz-transition; .8s-prijelaz: sve lakoće .8s; 9);

Kao što vidite, dragi prijatelji, sve je prilično jednostavno i nema nepotrebne zabune. Ako sve učinite ispravno, dobit ćete u svom arsenalu prekrasan alat u koji možete smjestiti bilo koji sadržaj, bilo da se radi o tekstualnom sadržaju, fotografijama, raznim obrascima za registraciju i povratne informacije ili videozapisima iz bilo kojeg izvora treće strane. Eksperimentišite sa parametrima, modifikujte prozor kako želite. Ako je moguće, podijelite svoja iskustva ili probleme koji se iznenada pojavljuju u komentarima.

Često, čak i vrlo često, postavljaju mi ​​se pitanje kako pravilno zaustaviti reprodukciju videa prilikom zatvaranja moda. prozor. Kada zatvorite modalni prozor, reprodukcija videa u demonstraciji se zaustavlja. U demonstraciji sam koristio događaj onclick za dugme za zatvaranje prozora, koji ukazuje na adresu demo stranice u linku, tj. stranica na kojoj se nalazi video prozor:

Možete jednostavno koristiti link sa praznim atributom href="" u oba slučaja se stranica ponovo učitava i, shodno tome, prozor se zatvara i video staje, štaka naravno, ali nema drugog efikasnijeg i validnijeg rješenja, bez povezujući javascript, trenutno nisam ovdje.

Sa JavaScript API-jem, možete kontrolirati Chromeless Player i YouTube ugrađeni plejer koristeći javaScript kod. Za naš modalni blok sa ugrađenim videom, izvršni js će biti ovakav:

var player; funkcija naYouTubePlayerAPIReady() ( player = novi YT.Player("player"); ) $("#stop").click(function())( player.stopVideo() ))

Kada kliknete na dugme sa id="stop" funkcija će biti pozvana, prozor će se zatvoriti i reprodukcija videa će se zaustaviti.
Međutim, trebali biste shvatiti da će za druge video usluge ples s tamburama biti drugačiji))). Iako uvijek postoji izbor - koristiti gotove specijalizirane dodatke.

Web dizajneri i poduzetnici koji žive u zemljama ruskog govornog područja vjerovatno žele imati mogućnost da koriste ne samo šablone na engleskom jeziku. Takođe žele da imaju pristup kolekcijama gotovih rešenja na ruskom jeziku. Stoga bismo željeli skrenuti vašu pažnju na najnoviji odjeljak koji je sada predstavljen na TemplateMonster tržištu. Vrijedi napomenuti da je tekst za svaki od šablona napisan ručno. Osim toga, nije vam potrebno nikakvo napredno znanje programiranja da biste kreirali impresivan online projekat.

Uz svo poštovanje, Andrew

Najvjerovatnije ste već više puta vidjeli iskačući modalni prozor na Internetu - potvrdu registracije, upozorenje, referentne informacije, preuzimanje datoteka i još mnogo toga. U ovom tutorijalu ponudit ću nekoliko primjera kako napraviti najjednostavniji modalni prozor.

$(document).ready(function()
{
alert("Tekst u iskačućem prozoru");
});

Zalijepite kod bilo gdje u tijelu vaše 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 pretraživač. U našem primjeru, nakon učitavanja stranice sa slikama, pojavit će se jednostavan iskačući prozor:

$(window).load(function()
{
alert("Stranica je završila učitavanje!)");
});

Često možete vidjeti da se obrasci za prijavu i registraciju nalaze u takvim prozorima. Hajdemo na posao

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

Pozivanje modalnog prozora

Modalni tekst prozora
Zatvori
Tekst u modalnom prozoru.

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

tijelo (
font-family:verdana;
font-size:15px;
}
.link (boja:#fff; text-decoration:nema)
.link:hover (boja:#fff; text-decoration:underline)
#maska ​​(
pozicija:apsolutna;
lijevo:0;
top:0;
z-indeks:9000;
background-color:#000;
display:none;
}
#boxes.window (
pozicija:apsolutna;
lijevo:0;
top:0px;
-top: 40px;
širina:440px;
visina:200px;
display:none;
z-indeks:9999;
padding: 20px;
overflow: skriveno;
}
#kutije #dijalog (
širina:375px;
visina:203px;
padding:10px;
background-color:#ffffff;
}
.top(
pozicija:apsolutna;
lijevo:0;
top:0;
širina:370px;
visina:30px;
pozadina: #0085cc;
padding: 8px 20px 6px 10px;
}
.close(
float:desno;
}
.content(
padding-top: 35px;
}

U jQuery kodu ćemo se fokusirati na poziciju modalnog prozora i maske, u našem slučaju na postepeno zatamnjenje pozadine.

Pažnja! Ne zaboravite da uključite biblioteku u zaglavlje dokumenta!

Povezivanje biblioteke sa Google web stranice. Pa, sam jQuery kod.

jQuery kod

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

U današnje vrijeme, za razne stranice, sve vrste iskačućih modalnih prozora - iskačućih prozora - za registraciju, autorizaciju, informacijske prozore - svih vrsta i veličina su postale norma, osim jQueryja , za jednostavno i praktično kreiranje takvih iskačućih prozora - isti Shadowbox, na primjer.

Izgled, veličina i dizajn takvih iskačućih prozora su potpuno drugačiji - s preklapanjem, sjenama, animacijama - ne možete sve pobrojati. Jedino što im je zajedničko je, možda, činjenica da se obično prikazuju u samom centru stranice – i horizontalno i okomito. I ovo centriranje se vrši pomoću JS-a. Neću ulaziti u detalje ovih proračuna, samo ću ih ukratko opisati:

HTML kod skočnog prozora obično ima sljedeću strukturu:

... -- Iskačući 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 prostora i veličinu samog iskačućeg prozora (ako nisu specificirani), a zatim se izvode jednostavne kalkulacije pozicije njegovog gornjeg lijevog ugla ( css svojstva 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 to loša stvar), 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 me ne zavuče ovu tačku u radu svih ovih dodataka. Pojavila se ideja da se sav rad na pozicioniranju popup-a može prenijeti 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 radio u IE
< div class ="popup">

I malo CSS-a:

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