Jednostavan skočni prozor css. Kako napraviti modalni prozor u cssu. jQuery dodatak "ToastMessage"

U članku o stvaranju modalnog prozora pomoću CSS-a pogledali smo što je modalni prozor i zašto je potreban. Također smo napravili prozor koristeći samo css. U ovom ću članku opisati kako stvoriti javascript modalni prozor. Točnije, za izradu ćemo koristiti biblioteku jquery.

I tako počnimo stvarati modalni prozor u jqueryju. Da zakompliciramo problem, postavimo sljedeći uvjet. Morat ćemo izraditi odgovarajući modalni prozor. A prilagodljivost će se sastojati u činjenici da kada se veličina zaslona smanji, prozor će se također smanjiti. Počnimo stvarati adaptivni jquery modalni prozor s html označavanjem.

Kliknite ovdje! X Zatražite poziv

Mislim da je sve jasno s kodom. Imamo wrapper.wrapper, gdje se nalazi sadržaj naše stranice. Postoji gumb za pozivanje modalnog prozora s id-om gowindow, sam prozor s id-om modal_window i sloj preklapanja myoverlay. Sada napišimo CSS stilove.

Omotač ( širina: 100%; margina: auto; širina: auto;/*isto kao 100%*/ maks. širina: 960px;/*maksimalna širina omota*/ obrub: 1px čvrsta #000; boja pozadine: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( width: 34%;/*za odziv*/ visina: 300px; border-radius: 10px; border: 3px #fff solid; background: # e0e0e0; margin-top: -30%; margin-left: 33%; display: none; neprozirnost: 0; /*puna prozirnost za animaciju */ z-index: 5000; /*prozor mora biti gornji sloj*/ padding -top: 20px; text-align: center; position: relative; ) #modal_window #window_close ( width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; ) #myoverlay ( z-index: 3000; /*iznad svih slojeva, ali ispod prozora */ položaj: fiksno; /*za preklapanje stranice*/ boja pozadine: #000; neprozirnost: 0,5; širina: 100%; visina: 100 %; /*cijeli ekran */ gore: 0; lijevo: 0; kursor: pokazivač; prikaz: ništa; )

Opišimo css kod. Postavili smo block.wrapper da bude prilagodljiv, mijenja se ovisno o veličini zaslona, ​​ali ne više od 960px. Neću prikazati kod gumba. Širinu prozora #modal_window postavljamo u postotku, a širina će ovisiti o širini .wrappera. Za centriranje prozora, postavite marginu na 33%. Izračunava se kao 50%-17%, gdje je 17% pola širine prozora. Sakrivamo prozor sa svojstvima display: none i opacity: 0. Uz kod #window_close i #myoverlay, mislim da je sve jasno. Napišimo sada jquery kod. Pretpostavit ćemo da je jqery već povezan.

$(document).ready(function() ( $("#gowindow").click(function())(//kliknite na gumb $("#myoverlay").fadeIn(400, //prikažite sloj preklapanja function() ( $("#modal_window") .css("display", "block") //učini prozor vidljivim.animate((opacity: 1, top: "50%"), 200); //povećaj prozirnost, prozor je gladak pomiče se van )); )); /* uklonite prozor */ $("#window_close, #myoverlay").click(function())( //kliknite na sloj koji se preklapa ili križ $ ("#modal_window") .animate((opacity: 0, top: "45%"), 200, //transparentnost je uključena, prozor ide gore function())( $(this).css("display", "none"); //učini prozor nevidljivim $("# myoverlay").fadeOut(400); //ukloni sloj preklapanja )); )); ));

Mislim da Js kodu nije potrebno objašnjenje, jer sam ga dobro komentirao. To je sve što mislim, pa da rezimiramo. Napravili smo jednostavan modalni prozor koji reagira na jquery

Pozdrav svima. Neki dan sam pažljivo pogledao statistiku bloga i otkrio da su primjeri izrade modalnih prozora također od velikog interesa za naše internetske radnike. Najpopularnija rješenja pokazala su se rješenja za implementaciju skočnih prozora bez korištenja javascripta, isključivo u čistom .
Tijekom svog rada nakupio sam mnogo zanimljivih rješenja, koja sam u različitim vremenima detaljno opisao u detaljnim člancima na stranicama svog bloga, ali mnoge od tih lekcija s vremenom su nestale u pozadini. Čitateljima blogova ponekad je teško snalaziti se, a većina učinkovitih metoda za stvaranje učinkovitih modalnih prozora i skočnih obrazaca jednostavno prođe nezapaženo.
Stoga sam, uzimajući u obzir interes korisnika za ovu temu, odlučio kombinirati sve lekcije i primjere na ovu temu i prikazati zbirku modalnih prozora i obrazaca u zasebnom članku. Rezultat je kratki pregled s kratkim opisom, poveznicama na primjere i članke. Pa gledajte, proučavajte i ako se nekome svidi neko od rješenja, neka slobodno uzme izvorni kod, pa stvara, stvara, stvara...

Najpopularnija metoda stvaranja modalnih prozora među čitateljima mog bloga. Vrlo jednostavno za implementaciju. Izgled pop-up blokova i sve funkcionalnosti temelje se isključivo na CSS3, bez uključivanja Javascripta i dodatnih grafičkih elemenata.
Mogućnost povezivanja i prikazivanja modalnih prozora na gotovo svim web stranicama. Dovoljno je pravilno postaviti html okvir na pravo mjesto, dodati sadržaj koji vam je potreban, povezati stilove, sve to povezati s aktivacijskim gumbom ili bilo kojim drugim elementom stranice (slike, stavke izbornika, poveznice, jedna riječ u tekst itd.) i to je to, spremno za rad.

Vrlo jednostavan, lagan jQuery dodatak s kojim možete brzo i jednostavno implementirati na svoju web stranicu prikaz modalnih prozora s bilo kojom informacijom, bilo da se radi o jednostavnom tekstu, slikama, raznim obrascima ili ugrađenom videu.
Izgled se formira pomoću CSS-a, veličina prozora postavlja se izravno u poveznici, u atributu href="#?w=500", gdje #?w=500 označava potrebnu širinu prozora. Međutim, nakon proučavanja detalja lekcije, sve će postati vrlo jasno. Da bi ovo rješenje radilo, potrebna je biblioteka jQuery povezana sa web mjestom.

U početku se u lekciji razmišljalo o apsolutnoj centralizaciji blok elemenata sa sadržajem, ali o tome je toliko napisano da sam odlučio razrijediti temu prilagodljivošću i sve to prekriti na modalnom prozoru, koristeći isključivo CSS alate. Što je iz ovoga proizašlo možete saznati proučavanjem lekcije.

Prilično svježa metoda za implementaciju skočnih (modalnih) prozora. Često sam koristio skrivene potvrdne okvire za stvaranje padajućih blokova informacija ili "". Kao rezultat toga, sve se pokazalo vrlo jednostavnim; koristeći CSS3 i sintaktičke značajke HTML5, možete lako organizirati rad modalnih prozora. Nisam se previše fokusirao na dizajn (to nije cijela poanta); uzeo sam primjer Bootstrap info blokova kao polazište. Metoda radi savršeno u svim modernim preglednicima; korisnici koji zaglave na verzijama IE-a s mahovinom nažalost prolaze.

Tema organiziranja gledanja videa u modalnom bloku, isključivo pomoću CSS3, bez javascripa, proganja me. Ne, sve je u redu s video izlazom u modalnom prozoru, ne mogu pronaći adekvatno i zadovoljavajuće rješenje za zaustavljanje videa kada je prozor zatvoren. Glupo sam upotrijebio link s praznim href="" atributom; ova ne baš košer metoda prevrće mnoge vješte majstore na spavanju, ali trenutno još nisam pronašao drugo učinkovitije i valjanije rješenje.

Često su me pitali je li moguće ugraditi nekakav klizač unutar modalnog prozora, ne samo za slike, već i za tekst. Zašto ne. Buržoazija je pronašla jednostavan rotator sadržaja koji je odgovarao svim parametrima, preostalo je samo spojiti ga s gotovim modalnim prozorom. I na kraju se dogodilo to što se dogodilo :)). Gledajte, sve je vrlo jednostavno implementirati.

Mnoge stranice koriste skočne obrasce za povratne informacije, obrasce za registraciju i prijavu. Najlakši način je ugraditi radni obrazac u gotov modalni prozor. Uzmite prilično pristojan oblik, postavljen u CSS3, bilo koju verziju modalnog prozora prikazanog gore, sve što preostaje je kombinirati oba ova elementa u jedan mehanizam. Kako to učiniti? To je upravo ono što je detaljno opisano u predstavljenoj lekciji.

Izvrsna prilika za vaše korisnike da šalju poruke s bilo koje stranice ili pojedinačnog posta na web-mjestu (blogu) zaseban je, modalni obrazac za kontakt. Ispravno priložite PHP rukovatelj obrascu, postavite ga u tijelo stranice koja vam je potrebna i to je to, sve što trebate učiniti je povremeno provjeravati svoj poštanski sandučić. Ova metoda radi ispravno u svim modernim preglednicima: Chrome, Firefox, Opera, Safari, također u Internet Exploreru, počevši od verzije 9. Sam obrazac opremljen je funkcionalnošću modalnog prozora pomoću CSS3 magije.

Lightbox je vrsta modalnog prozora, odnosno princip rada je gotovo isti, iako se uglavnom koristi za gledanje uvećanih slika ili slika u punoj veličini. Svojedobno sam odlučio napraviti više-manje adaptivnu verziju Lightboxa, isključivo koristeći CSS3. Što je iz toga proizašlo možete saznati gledajući primjer i ako je tema relevantna, proučite lekciju. Nažalost, korisnici koji su jako navučeni na IE 8 i niže neće vidjeti ništa; metoda se temelji na korištenju pseudo-class:target .

Zanimljivo (po mom mišljenju) rješenje za stvaranje zasebnog, originalno dizajniranog, skočnog obrasca za kontakt za web mjesto. Obrazac radi na temelju obrade događaja onclick. Dizajnirajte pomoću izvorne slike u obliku poštanske omotnice. Obrazac radi brzo i ispravno u svim preglednicima, tako da je sasvim vrijedan primjer načina interakcije s korisnicima.

Mene, kao i mnoge druge, zalede razni skočni prozori kada se stranica prvi put učita. Mislim da je ova metoda previše nametljiva. No značajka je tražena i naširoko korištena, što znači da vjerojatno ipak vrijedi vidjeti kako cijela stvar funkcionira. Svi su moderni preglednici sumnjičavi prema raznim vrstama skočnih prozora u početnoj fazi učitavanja stranice; jednostavno ih blokiraju. U predstavljenoj lekciji detaljno opisujem kako se ovo blokiranje može zaobići, također ćete naučiti kako pravilno koristiti kolačiće tako da se prozor pojavi korisniku jednom kada prvi put posjeti stranicu ili u određenom intervalu.

To je vjerojatno sve. Naravno, postoji nekoliko drugih radnih opcija za stvaranje modalnih prozora u zalihama, ali toliko ih je na Internetu, glavna stvar je pronaći ono što vam treba. Nadam se da će vam ovaj odabir pomoći da se snađete u temi u hrpi članaka na mom blogu. Budući da su iskapanja uspješna i da je pronađen izgubljeni materijal, pregled će biti ažuriran.

Sa svim poštovanjem, Andrew

Modalni prozor je spremnik koji, kada se klikne poveznica, iskače i pruža neke informacije. Mislim da su mnogi već upoznati s tim, ali ako nisu, pogledajte demo verziju da shvatite o čemu se radi. Sada ih ima ogroman broj i svaki radi na svoj način. Na primjer, postoje potpuno standardni koji od vas traže da izvršite neku radnju, u ovom primjeru potvrdu. Ili, na primjer, druga opcija, kada prvi put posjetite web mjesto, što će biti relevantno za razne pretplate na grupe na društvenim mrežama. Na netu postoje modalni prozori CSS, pa, ja bih želio uzeti ovaj dio JavaScript, jer ga čini zanimljivijim i dobro radi u svim preglednicima.

PRVI KORAK. JavaScript kod.

Da biste pokrenuli modalni prozor, morate proslijediti vrijednost funkciji prozor.onload. U kojem ćemo proslijediti dva elementa identifikatora " a"I" b".

//prosljeđivanje elemenata prema ID-u "a" i "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); )

Zatim pišemo funkciju " pokazatiA", koji će prikazati modalni prozor i prijeći na elemente " a"I" b"stilovi, naime postavljamo prozirnost, širinu i blokiranje prozora ako se ne klikne na link" otvoren".

//pokaži prozor funkcije "showA" function showA() ( //Postavi transparentnost i blokiraj prikaz //elementa "b" b.style.filter = "alpha(opacity=80)"; b.style. neprozirnost = 0,8; b .style.display = "block"; // Postavite blokiranje i gornji dio na 200px //elementa "a" a.style.display = "block"; a.style.top = "200px ";)

Nakon otvaranja modalnog prozora, moramo ga kasnije nekako zatvoriti ili sakriti, za to pišemo funkciju " sakritiA"koji će sakriti modalni prozor i dodijeliti mu stilove za elemente" a"I" b".

//Pozovite funkciju "hideA", koja će sakriti //prozor za elemente "a" i "b" function hideA() ( b.style.display = "none"; a.style.display = "none"; )

Puni kod.

//prosljeđivanje elemenata prema ID-u "a" i "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); ) //prikazivanje prozora funkcije " showA" funkcija showA() ( //Postavite prozirnost i blokirajte prikaz //elementa "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style. display = " block"; // Postavite blokiranje i gornju marginu na 200px // elementa "a" a.style.display = "block"; a.style.top = "200px"; ) //Pozovite " hideA" funkcija, koja će sakriti //prozor za elemente "a" i "b" funkcija hideA() ( b.style.display = "none"; a.style.display = "none"; )

DRUGI KORAK. HTML kôd.

Otvoren

U oznaci "div" navedite identifikator " a", koji će komunicirati sa stilovima CSS i sa šifrom JavaScript. Zatim dodajemo još jednu oznaku " div" i dajte mu identifikator " prozori", koji će djelovati kao oznaka unutar spremnika modalnog prozora.

Unutra označavamo vezu koja će biti " Zatvoriti"modalni prozor, dajte mu i stil" stranice" i dajte mu zadani stil " plovak: desno“, odnosno prikazat ćemo poveznicu za zatvaranje modalnog prozora u gornjem desnom kutu.

Zatvoriti

Registriramo identifikator " b", koji će sakriti prozor.

Puni kod.

Otvori zatvori

TREĆI KORAK. CSS kod.

Potrebni stilovi CSS, bez kojeg modalni prozor neće ispravno raditi, odnosno neće uopće ispravno raditi niti prikazivati ​​informacije.

I tako je prvi traženi stil u vezi s položajem u ovom primjeru fiksni. Omogućuje vam da prikažete modalni prozor dok ga još uvijek ograničavate na rub ispune. Pomoću z-indeks određujemo koliko je modalni prozor identificiran nakon klika na vezu" otvoren", i " Zatvoriti". Također prikaz: nijedan, koji vam omogućuje skrivanje modalnog prozora dok se ne klikne poveznica.

#b ( pozicija: fiksno; gore: 0; lijevo: 0; desno: 0; dno: 0; prikaz: ništa; pozadina: siva; z-indeks: 1; ) # a ( granica: 1px puna crna; pozicija: fiksna ; pozadina: #eff7ff; z-index:3; display:none; ) #windows ( padding:5px; width: 500px; height: 300px; border: 2px full blue; ) a.pages ( background: #97cdff; color: bijelo; padding: 4px; text-decoration: none; ) a:hover.pages ( pozadina: crvena; boja: bijela; padding: 4px; text-decoration: none; )

Hvala svima na pažnji!

Modali, preklapanja, dijalozi, kako god ih zvali, vrijeme je da ponovno razmislite o ovom obrascu korisničkog sučelja. Kada su prvi put došli na scenu, modali su bili elegantno rješenje za problem korisničkog sučelja. Prvo, pojednostavljuju korisničko sučelje. Drugo, ušteda prostora na zaslonu. Od tada su dizajneri spremno prihvatili modale, a neki su ih doveli do ekstrema. Modali su postali današnja verzija zastrašujućeg skočnog prozora. Korisnicima modalni prozori smetaju i naučili su ih instinktivno i automatski zatvoriti.

Modalni prozor je element koji se nalazi na vrhu glavnog prozora aplikacije. Blokira glavni prozor, ali ga ostavlja vidljivim iza podređenog modalnog prozora. Korisnici moraju stupiti u interakciju s modalnim prozorom prije nego što se mogu vratiti na nadređenu aplikaciju. — Wikipedia

Modalni prozor možete koristiti kad god vam zatreba:

Koristite kada želite prekinuti trenutni zadatak korisnika kako biste mu skrenuli pozornost na nešto važnije.

Koristite kada želite dobiti informacije od korisnika. Na primjer, obrazac za registraciju i autorizaciju.

Koristite ako želite prikazati dodatne informacije bez gubitka konteksta nadređene stranice. Na primjer, prikazivanje većih slika ili videozapisa.

Koristite kada želite prikazati informacije koje nisu izravno povezane s nadređenom stranicom ili druge parametre "neovisne" o drugim stranicama. Na primjer, obavijesti.

Napomena: Nemojte koristiti modale za prikaz poruka o pogreškama, poruka o uspješnosti zadatka ili poruka upozorenja. Ostavite ih na stranici.

Loše implementirani slojevi mogu ometati dovršetak zadatka. Kako biste osigurali da vaš modalni prozor ne ometa korisnike, razmislite o sljedećem:

Omogućite korisnicima da pobjegnu tako što ćete im omogućiti da zatvore modalni prozor. To se može postići na sljedeće načine:

• Gumb za odustajanje
• Gumb za zatvaranje
• Tipka za bijeg
• Kliknite izvan prozora

Savjet za pristupačnost: svaki modalni prozor trebao bi imati dostupnu kontrolu tipkovnice za zatvaranje prozora. Na primjer, tipka za izlaz trebala bi zatvoriti prozor.

Dajte korisniku kontekst modalnim naslovom. Ovo omogućuje korisnicima da znaju gdje se on/ona nalazi jer nisu napustili originalnu stranicu.

Savjet: Oznaka gumba (koji pokreće modalni prozor) i modalni naslov moraju odgovarati

Oznake gumba trebaju sadržavati jasne nazive. Ovo se odnosi na bilo koji gumb. Za modalne prozore, gumb 'zatvori' trebao bi biti predstavljen kao ikona gumba 'zatvori' ili 'x'.

Napomena: neka ikona gumba ne bude zbunjujuća. Ako korisnik pokuša poništiti radnju i pojavi se modalni prozor s DRUGIM gumbom za poništavanje, dolazi do zabune. “Poništavam li otkazivanje? Ili da nastavim?"

Modalni prozor ne bi trebao biti prevelik ili premalen, samo želite da bude odgovarajuće veličine. Cilj je sačuvati kontekst, tako da modalni prozor ne bi trebao zauzimati cijeli zaslon. Sadržaj mora odgovarati prozoru modela. Ako je traka za pomicanje potrebna, možete stvoriti novu stranicu.

• Lokacija je na vrhu zaslona jer se u mobilnom prikazu modalni prozor može izgubiti ako ga postavite ispod.
• Veličina — Nemojte koristiti više od 50% zaslona modela.

Kada otvorite modalni prozor, koristite efekt okvira za osvjetljavanje (potamnite pozadinu). Ovo privlači pozornost na modalni prozor i označava da korisnik ne može komunicirati s nadređenom stranicom.

Savjet za pristupačnost: postavite fokus tipkovnice na modalni prozor.

Nemojte iznenaditi korisnike skočnim modalnim prozorom. Neka korisnička radnja, kao što je klik na gumb, praćenje veze ili odabir opcije, pokrene modalni prozor. Modalni prozori koji se sami otvaraju mogu iznenaditi korisnika i izazvati njihovo brzo zatvaranje.

Modali i mobilni uređaji općenito ne rade dobro zajedno. Gledanje sadržaja je teško jer su modali preveliki, zauzimaju previše prostora na zaslonu ili su premali. Dodajte elemente kao što su tipkovnica uređaja i ugniježđene trake za pomicanje. Korisnici mogu samo pomicati prste i zumirati, pokušavajući uhvatiti polje modalnog prozora. Postoje bolje alternative za modalne prozore, pa ih ne bi trebalo koristiti na mobilnim uređajima.

Kada stvarate modalne prozore, ne zaboravite dodati dostupne kontrole tipkovnice. Razmotrite sljedeće:

Otvaranje modalnog prozora — element koji poziva dijaloški okvir mora biti dostupan s tipkovnice.

Premještanje fokusa na dijaloški prozor — Kada je otvoren modalni prozor, fokus tipkovnice treba pomaknuti na početak.

Upravljanje fokusom tipkovnice — Kada se fokus premjesti na dijaloški okvir, trebao bi biti "zaključan" unutar njega dok se dijaloški okvir ne zatvori.

Zatvaranje dijaloškog okvira — Svaki modalni prozor mora imati dostupnu kontrolu tipkovnice za zatvaranje tog prozora.

Standard Accessible Rich Internet Applications (ARIA) definira načine poboljšanja pristupačnosti web sadržaja i web aplikacija.

Sljedeće ARIA oznake mogu biti korisne pri stvaranju pristupačnog modalnog prozora: Role = “dijalog”, aria - skriveno, aria - oznaka

Također, vodite računa o slabovidnim korisnicima. Oni mogu koristiti povećala na monitorima za povećanje sadržaja zaslona. Nakon povećanja, korisnik može vidjeti samo dio zaslona. U tom će slučaju modalni prozori biti prikazani na isti način kao na mobilnim uređajima.

Ako su ljudi naučili automatski pokušavati zatvoriti modalne prozore, zašto biste ih htjeli koristiti?

Privlačenje pozornosti korisnika, održavanje konteksta i pojednostavljenje korisničkog sučelja velike su prednosti modalnih prozora. Međutim, imaju i nedostatke jer prekidaju korisničko iskustvo i onemogućuju interakciju s nadređenom stranicom skrivajući sadržaj iza modalnog prozora. Modalni prozor ne mora uvijek biti rješenje. Prilikom odabira razmotrite sljedeće:

Spisak

• Kada prikazujemo modalne prozore?
• Kako prikazujemo modalne prozore?
• Kako izgledaju modalni prozori?
• Koje podatke pružamo i prikupljamo?

Postoji alternativna komponenta korisničkog sučelja za modalne prozore: nemodalna ili poznata kao tost (izraz koji Microsoft i Google koriste u materijalnom dizajnu). Pročitajte moj sljedeći post kako biste saznali više.

Prikaz sadržaja u modalnim prozorima. Kako biste vidjeli dodatak na djelu na demo stranici, kliknite na poveznicu: Obrazac za prijavu ili Osnovni sadržaj.

Skočne poruke. Dodatak dolazi u dvije verzije. U jednom slučaju poruke nestaju same od sebe nakon određenog vremena, u drugoj implementaciji, da biste zatvorili poruku, morate kliknuti na gumb.

Dodatak "Otkrij". Kako biste vidjeli dodatak na djelu, kliknite na gumb "Fire A Reveal Modal" na demo stranici.

Kliknite na križić na demo stranici da biste vidjeli dodatak na djelu.

jQuery dodatak za prikaz obrasca za povratne informacije u skočnom prozoru.

Dijaloški okviri u stilu Facebooka. Osim statičkih informacija, u prozore možete postaviti slike, okvire i Ajax zahtjeve. Puno postavki za rad dodatka, vrlo moćan alat. Izgleda vrlo stilski i funkcionalno. Slijedite veze na demo stranici kako biste vidjeli primjere s različitim sadržajem.

Zgodan skočni dijaloški okvir u jQueryju.

Slatki skočni modalni prozori. Tri stila. Demo stranica sadrži 3 poveznice za otvaranje prozora.

Pop-up modalni prozori nekoliko vrsta. Da biste vidjeli dodatak na djelu, kliknite vezu na demo stranici.

Poruka se prikazuje na vrhu stranice, koja je zatamnjena. Kliknite na "Klikni me" na demo stranici da vidite skočnu poruku. Klikom na križić zatvorit ćete ga. Implementirano pomoću jQueryja.

Implementirajte moderne modalne dijaloge bez upotrebe skočnih prozora i ponovnog učitavanja stranica. Na demo stranici kliknite gumb "Pokreni demo" kako biste vidjeli skriptu na djelu.

Dodatak za prikaz sadržaja u modalnim prozorima.