Govoreći o raznim tehnikama izgradnje web mjesta, bilo bi smiješno ne govoriti o nekim od načina izrade modalnih prozora. Nećemo raspravljati o svrsi, korisnosti i problemima koji se pojavljuju u korištenju skočnih prozora, modalnih prozora. Analizirajmo samo jedan od brojnih primjera izrade takvih prozora. Postoje situacije kada nije moguće koristiti posebne dodatke, na primjer, kao što su i, pa je vrijedno razumjeti kako možete stvoriti vlastite.
Pogledajmo kako to učiniti:
HTML
Počnimo s dodavanjem oznaka sa sljedećim atributima:
href - #? w = 500 označava širinu prozora
rel - jedinstveni atribut za svaki prozor
class = "poplight" - klasa za prikaz skočnog prozora
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Pogledajte Prozor u akciji - Širina = 500px
Pogledajte Prozor u akciji - Širina = 500px
Zatim moramo stvoriti inline oznaku za skočni prozor. Možete ga postaviti bilo gdje na stranici, na primjer, na dnu sadržaja. Imajte na umu da skočni ID odgovara atributu rel označiti Ovo će povezati vezu i skočni prozor zajedno.
Naslov
Bilo koji tekst koji vam srce poželi
I tako, shvatili smo položaj našeg prozora na stranici, sada ga stilizirajmo stilovima, damo mu, da tako kažem, pristojan izgled.
CSS izgled
Radi jasnoće, napisao sam neka objašnjenja za parametre stila našeg prozora. Budući da skočni prozori mogu biti različitih veličina, ne navodimo u CSS-u skočni_blok rubova prozora, za izračunavanje potrebne veličine, ovo je samo zadatak za.
S formiranjem prozora i njegovim izgledom pomoću css-a, mislim da neće biti posebnih poteškoća. Stilovi se mogu napisati izravno na HTML stranici, između oznaka
i, ili možete staviti svoje stilove u zasebnu datoteku, obično je to datoteka style.css, ili tako nešto.
Postavljanje JQueryja
Za punopravni rad modalnog prozora morate povezati jQuery, oni koji nisu upoznati s radom ove biblioteke mogu čitati.
Pa idemo dalje. Možete koristiti najnoviju verziju jQueryja s web stranice knjižnice ili koristiti zasebnu datoteku hostiranu na Googleu tako da je povežete s dokumentom u odjeljku ispred završne oznake
postavljanjem reda ovako:
U sljedećem koraku pogledat ćemo punjenje i funkcije jquery dodatka, kako bismo aktivirali naš popup prozor, kod sadrži neka objašnjenja za bolje razumijevanje onoga što radimo.
JQuery dodatak
$ (dokument). spreman (funkcija () ( // Kada kliknete na vezu s klasom poplight i href atributa oznake sa #$ ("a.poplight"). kliknite (funkcija () (var popID = $ (ovo). attr ("rel"); // dobiti naziv prozora, važno je ne zaboraviti promijeniti naziv u atributu rel linka prilikom dodavanja novih var popURL = $ (ovo). attr ("href"); // dohvati veličinu iz href atributa veze// zahtjev i varijable iz href url var upit = popURL. podjela ("?"); var dim = upit [1]. podjela ("&"); var popWidth = dim [0]. podijeliti ("=") [1]; // prva vrijednost niza upita// Dodajte gumb za zatvaranje prozoru$ ("#" + popID). nestati u (). css (("width": Broj (popWidth))). dodati ( ""
)
;
// Odredite marginu (marginu) za poravnanje po sredini (okomito i vodoravno) - dodajemo 80 visini/širini, uzimajući u obzir padding + širinu obruba definiranog u css-u var popMargTop = ($ ("#" + popID). visina () + 80) / 2; var popMargLeft = ($ ("#" + popID). širina () + 80) / 2; // Postavite količinu dopuna$ ("#" + popID). css (("margin-top": - popMargTop, "margin-left": - popMargLeft)); // Dodajte poluprozirnu pozadinu za sjenčanje$ ("tijelo"). dodaj (" "
)
;
// div spremnik bit će napisan prije oznake.
$ ("# fade"). css (("filter": "alfa (prozirnost = 80)")). nestati u (); // prozirnost sloja, filter za dosadan IE vratiti false; )); // Zatvori prozor i zasjenjenje pozadine$ (dokument). on ("klik", "a. zatvori, #fade", funkcija () ( // zatvoriti na klik izvan prozora, t.j. u pozadini ...$ ("# fade, .popup_block"). fadeOut (funkcija () ($ ("# fade, a.close"). ukloniti (); // izblijediti)); vratiti false; )); ));
Općenito, ako ne idete u džunglu i ne opterećujete se nepotrebnim brbljanjem koda, naš prekrasni modalni prozor je spreman za rad i čeka vaše misli prevedene u tekst ili bilo koju drugu korisnu informaciju. Za one koji bi željeli koristiti modalni prozor za postavljanje videa ili velikih slika u njega, ipak savjetujem korištenje posebnih dodataka kao što su, budući da je gornji primjer modalnog prozora namijenjen više za lagane i ne baš teške informacije, mada po želji to nije problem....
Sljedeći put ću vam svakako reći i pokazati primjerom, a sigurno će mnogi biti zainteresirani za učenje o drugim objektima trećih strana u skočnom prozoru. Dakle, nemojte se izgubiti na webu i ostanite s nama!
ažuriranje: Verzija dm-modal.js v1.3 (15.01.2017.) Fiksno: Zamijenjena zastarjela funkcija .live () koristeći href * = \\ # sintaksu. Dodatak sada radi s najnovijim verzijama jQuery biblioteke
To je sve! Nadam se da ste dobili još jedan koristan vodič.
Uz svo poštovanje, Andrija
1. Modalni prozor na jQueryju "Simple Modal Box"
2. jQuery dodatak "LeanModal"
Prikaz sadržaja u modalnom obliku. Da biste vidjeli dodatak u akciji na demo stranici, kliknite na poveznicu: Obrazac za prijavu ili Osnovni sadržaj.
3. jQuery dodatak "ToastMessage"
Skočne poruke. Dodatak dolazi u dva okusa. U jednom slučaju poruke nestaju same, nakon određenog vremena, u drugoj implementaciji, da biste zatvorili poruku, morate kliknuti na gumb.
4. Sadržaj koji se pojavljuje u modalnom prozoru
Dodatak "Otkrij". Da biste vidjeli dodatak u akciji, kliknite na gumb "Fire A Reveal Modal" na demo stranici.
5. Slatki dijaloški okviri
Kliknite na križić na demo stranici da vidite dodatak u akciji.
6. Modalni prozor Mootools, dodatak "MooDialog"
7. jQuery popup traka na vrhu zaslona
8. jQuery skočni prozor
jQuery dodatak za prikaz obrasca za povratne informacije u skočnom prozoru.
10. MooTools "LightFace" dodatak za implementaciju Facebook dijaloških okvira
Dijaloški okviri u Facebook stilu. Osim statičkih informacija, slike, okviri, Ajax zahtjevi mogu se postaviti u prozore. Puno postavki dodataka, vrlo moćan alat. Izgleda vrlo elegantno i funkcionalno. Slijedite poveznice na demo stranici da biste vidjeli primjere s različitim sadržajem.
11.jQuery modalni
Uredan jQuery skočni dijaloški okvir.
12. jQuery modali
Slatki skočni modalni prozori. Tri stila. Demo stranica sadrži 3 veze za pozivanje prozora.
13. jQuery modali
Pop-up modalni prozori nekoliko vrsta. Da biste vidjeli dodatak u akciji, kliknite na poveznicu na demo stranici.
15. Skočna poruka preko stranice
Poruka se prikazuje na stranici, koja je zatamnjena. Kliknite na "Klikni me" na demo stranici da biste vidjeli skočnu poruku. Klikom na križ će se zatvoriti. Implementirano uz jQuery.
16. Modalni prozor "ModalBox" u javascriptu
Implementacija modernih modalnih dijaloških okvira bez korištenja skočnih prozora i ponovnog učitavanja stranica. Na demo stranici kliknite na gumb "Start Demo" da vidite kako skripta radi.
17. Dodatak "Leightbox" pomoću biblioteke Prototype
Dodatak za prikaz sadržaja u modalnim prozorima.
Vrlo često možete pronaći modale na stranicama, a svi se koriste za različite zadatke. Doista, to je prilično moćan alat koji vam omogućuje da sučelje stranice učinite interaktivnijim i jednostavnijim za korištenje. Na primjer, modalni prozori mogu se koristiti za različite oblike, kao što su obrazac za autorizaciju, obrazac za povratne informacije, naručivanje proizvoda, a nikad se ne zna.
U ovom postu ćemo pogledati primjer kako napraviti modalni jednostavan prozor koristeći jQuery i CSS. Posebnost ovog primjera je u tome što on ovdje nije potreban, s izuzetkom same jQuery biblioteke.
Postavite modalni kod na stranicu:
Zatvoriti
Otvori modalni prozor
Kao što možete vidjeti iz oznake, sam blok modalnog prozora je div s atributom id = modalni_oblik koji sadrži element span s id = modal_close... Ovaj element služit će kao gumb za zatvaranje modalnog prozora, osim toga, ispod bloka nalazi se div s atributom id = preklapanje, koji ujedno služi i za zatamnjivanje pozadine. Modalni prozor će se otvoriti referencom, s klasom modalni.
Za modalni_oblik postavili smo fiksnu širinu i visinu, a zatim centrirali poziciju na središte zaslona. Za modalnu podlogu ( preklapanje) postavljamo veličinu na širinu zaslona, ispunjavamo prozirnošću i također je skrivamo prema zadanim postavkama. Poseban trenutak sa z-indeks, modal bi trebao imati najveći od svih elemenata na stranici, a naslovnica bi trebala imati najveći od svih osim samog modala.
Sada do najosnovnijeg, ovo je javascript kod. Za modalni prozor će se koristiti dva glavna događaja, ovo je njegovo otvaranje - klik na element s klasom modalni, u našem slučaju ovo je poveznica, a zatvaranje modalnog prozora je klik na naslovnicu ( preklapanje), ili kliknite na gumb za zatvaranje, u našem slučaju to je element span s id = modal_close.
S animatom mijenjamo okomiti položaj vrh, kao i transparentnost neprozirnost, a time dobivamo zanimljiv efekt. Sličan učinak se koristi i kada je prozor otvoren i kada je zatvoren. Razlika je u tome što se mijenja redoslijed primjene svojstava za blokove, čime se vizualizira otvaranje i zatvaranje prozora.
3. Primjer jQuery modalnog prozora nazvanog referencom (s Demo)
Najvjerojatnije ste već više puta vidjeli skočni modalni prozor na internetu - potvrdu registracije, upozorenje, informacije o pomoći, preuzimanje datoteke i još mnogo toga. U ovom vodiču dat ću neke primjere kako stvoriti najosnovnije modalne prozore.
Kako stvoriti jednostavan skočni modal
Počnimo s ispitivanjem koda najjednostavnijeg modalnog prozora koji će se odmah pojaviti jQuery kod
Zalijepite kod bilo gdje tijelo Vaša stranica. Odmah nakon učitavanja stranice, bez ikakvih naredbi, vidjet ćete prozor koji izgleda ovako:
Ali sljedeći će se kod 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:
Pozovite jQuery modalni prozor referencom s CSS-om
Sljedeći korak je stvaranje modalni prozor kada kliknete na link. Pozadina će polako tamniti.
Č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 stavljamo u tijelo vašeg dokumenta.
Pozivanje modalnog prozora
Modalni tekst
Zatvoriti
Tekst u modalnom prozoru.
CSS kod... Ili u zasebnoj css datoteci ili u
U jQuery kodu ćemo se usredotočiti na položaj modala i maske, u ovom slučaju postupno potamnjujući pozadinu.
Pažnja! Ne zaboravite uključiti knjižnicu u zaglavlje dokumenta!
Povezivanje knjižnice s Google web-mjesta. Pa, sam jQuery kod.
JQuery kod
Modali su sastavni dio modernog web dizajna, uz pomoć njih programer može posegnuti za metodom petlje na jednoj stranici i ne bacanja posjetitelja na sekundarne stranice. U ovom vodiču pogledat ćemo kako stvoriti fantastične modale zamućene pozadine za svoju web stranicu pomoću jQueryja i CSS3. Zahvaljujući ovim pravilima napravit ćemo zamućenu pozadinu kada se pojavi prozor, koji će vezati pogled posjetitelja samo na potrebne informacije na stranici.
CSS3 modali zamućene pozadine
Najbolje ekonomske vijesti su samo ovdje: Drobaha
Animacija prozora bit će postavljena na način da kada kliknete na gumb izgleda, prozor će animirati od vrha do dna, dok se zamućenje pozadine automatski pojačava.
Korak 1. HTML
Imat ćemo spremnik koji će sadržavati: naslov, opis, zatim dodajemo klasu za gumb s klasom toggleModal da otvorite modalni prozor:
Naslov
Opis
Naslov za prozor
Kartice su vrlo zanimljiva i zgodna stvar prilikom izrade web stranice, omogućuju vam da pravilno organizirate informacije, a pritom štedite malo prostora na stranici.
Zatim moramo dodati klasu modalni je-aktivan, ova klasa će biti odgovorna za pozivanje modalnog prozora, modalni__zaglavlje odgovoran za naslov i njegov stil prozora.
Korak 2. CSS
Sada idemo na styling, prvi korak će biti klasa dugme, koji će biti odgovoran, pogađate, za gumbe na stranici, postavili smo ispravne parametre prikaza za njih:
Stilovi su prilično jednostavni, pohranjeni su u zasebnoj datoteci i ne bi trebali stvarati poteškoće prilikom njihovog uređivanja za programera koji se ikada susreo s CSS-om.
Korak 3. JS
Naše posljednje, ali ne manje važno, bit će podešavanje automatskog zamućenja pozadine pri pojavljivanju izbornika, kao i klikabilnosti linkova, u čemu će nam pomoći ova mala pravila Js:
Primjeri jQuery funkcije setTimeout () Javascript sprječava da više mjerača vremena izvodi setinterval u isto vrijeme
DIY radioamaterski krugovi i domaći proizvodi
Izrežite tekst u jednom ili više retka po visini s dodatkom elipsa Dodavanje gradijenta tekstu