Ko govorimo o različnih tehnikah gradnje spletnih mest, bi bilo smešno ne govoriti o nekaterih načinih ustvarjanja modalnih oken. Ne bomo razpravljali o namenu, uporabnosti in nastajajočih težavah uporabe pojavnih oken, modalnih oken. Analizirajmo le enega izmed številnih primerov izdelave takšnih oken. Obstajajo situacije, ko ni mogoče uporabiti posebnih vtičnikov, na primer in, zato je vredno razumeti, kako lahko ustvarite svoje.
Poglejmo, kako to storiti:
Html
Začnimo z dodajanjem oznak z naslednjimi atributi:
href - #? w = 500 označuje širino okna
rel - edinstven atribut za vsako okno
class = "poplight" - razred za prikaz pojavnega okna
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Glejte Okno v akciji - Širina = 500 slikovnih pik
Glejte Okno v akciji - Širina = 500 slikovnih pik
Nato moramo ustvariti vgrajeno oznako za pojavno okno. Postavite ga lahko kjer koli na strani, na primer na dno vsebine. Upoštevajte, da se id pojavnega okna ujema z atributom rel oznaka To bo povezalo povezavo in pojavno okno skupaj.
Naslov
Vsako besedilo, ki vam ga srce poželi
In tako smo ugotovili postavitev našega okna na stran, zdaj pa ga oblikujemo s slogi, damo mu tako rekoč dostojen videz.
Postavitev CSS
Zaradi jasnosti sem napisal nekaj razlag za slogovne parametre našega okna. Ker so pojavna okna lahko različnih velikosti, v CSS ne navajamo pojavni_blok robov okna, za izračun zahtevane velikosti, je to samo naloga za.
Z oblikovanjem okna in njegovim videzom z uporabo css mislim, da ne bo posebnih težav. Sloge lahko pišete neposredno na strani HTML, med oznakami
in, lahko pa svoje sloge postavite v ločeno datoteko, običajno je to datoteka style.css, ali nekaj takega.
Nastavitev JQuery
Za popolno delo modalnega okna morate povezati jQuery, tisti, ki niso seznanjeni z delom te knjižnice, lahko berejo.
No, gremo naprej. Uporabite lahko najnovejšo različico jQuery s spletnega mesta knjižnice ali uporabite ločeno datoteko, ki gostuje v Googlu, tako da jo povežete z dokumentom v razdelku pred zaključno oznako
s postavitvijo vrstice, kot je ta:
V naslednjem koraku si bomo ogledali polnjenje in funkcije vtičnika jquery, da aktiviramo naše pojavno okno, koda vsebuje nekaj razlag za boljše razumevanje tega, kar počnemo.
Vtičnik JQuery
$ (dokument). pripravljen (funkcija () ( // Ob kliku na povezavo z razredom poplight in href atributa oznake z #$ ("a.poplight"). kliknite (funkcija () (var popID = $ (to). attr ("rel"); // dobimo ime okna, pomembno je, da pri dodajanju novih ne pozabimo spremeniti imena v atributu rel povezave var popURL = $ (to). attr ("href"); // dobimo velikost iz atributa href povezave// zahteva in spremenljivke iz href url var query = popURL. razdeliti ("?"); var dim = poizvedba [1]. razdeliti ("&"); var popWidth = dim [0]. razdeli ("=") [1]; // prva vrednost niza poizvedbe// Oknu dodaj gumb za zapiranje$ ("#" + popID). fadeIn (). css (("širina": številka (popWidth))). dodaj ( ""
)
;
// Določite rob (margin) za poravnavo središča (navpično in vodoravno) - dodamo 80 na višino / širino, pri čemer upoštevamo padding + širino obrobe, definirane v css var popMargTop = ($ ("#" + popID). višina () + 80) / 2; var popMargLeft = ($ ("#" + popID). širina () + 80) / 2; // Nastavi količino oblazinjenja$ ("#" + popID). css (("margin-top": - popMargTop, "margin-left": - popMargLeft)); // Dodajte polprozorno senčno ozadje$ ("telo"). dodaj (" "
)
;
// vsebnik div bo napisan pred oznako.
$ ("# fade"). css (("filter": "alfa (prosojnost = 80)")). fadeIn (); // prosojnost plasti, filter za dolgočasen IE vrni false; )); // Zapri okno in senčenje ozadja$ (dokument). on ("klik", "a.close, #fade", funkcija () ( // zapremo ob kliku zunaj okna, t.j. v ozadju ...$ ("# fade, .popup_block"). fadeOut (funkcija () ($ ("# fade, a.close"). odstrani (); // zbledeti)); vrni false; )); ));
Na splošno, če ne greste v džunglo in se ne obremenjujete z nepotrebno kodo, je naše čudovito modalno okno pripravljeno za delo in čaka, da se vaše misli prevedejo v besedilo ali katero koli drugo koristno informacijo. Za tiste, ki bi radi uporabljali modalno okno za postavljanje videoposnetkov ali velikih slik vanj, sem kljub temu svetoval uporabo posebnih vtičnikov, kot je, saj je zgornji primer modalnega okna namenjen bolj lahkim in ne zelo težkim informacijam, čeprav po želji to ni problem....
Naslednjič vam bom zagotovo povedal in pokazal s primerom in zagotovo bo marsikoga zanimalo učenje o drugih predmetih tretjih oseb v pojavnem oknu. Zato se ne izgubite na spletu in ostanite z nami!
Nadgradnja: Različica dm-modal.js v1.3 (15.01.2017) Popravljeno: Zamenjana zastarela funkcija .live () s sintakso href * = \\ #. Vtičnik zdaj deluje z najnovejšimi različicami knjižnice jQuery
To je vse! Upam, da imate še eno koristno vadnico.
Z vsem spoštovanjem, Andrew
1. Modalno okno na jQuery "Simple Modal Box"
2. Vtičnik jQuery "LeanModal"
Prikazovanje vsebine v modalnih oblikah. Če si želite ogledati vtičnik v akciji na predstavitveni strani, kliknite povezavo: Obrazec za prijavo ali Osnovna vsebina.
3. Vtičnik jQuery "ToastMessage"
Pojavna sporočila. Vtičnik je na voljo v dveh okusih. V enem primeru sporočila izginejo sama od sebe, po določenem času, v drugi izvedbi, da zaprete sporočilo, morate klikniti na gumb.
4. Vsebina, ki se pojavi v modalnem oknu
Vtičnik "Razkrij". Če si želite ogledati vtičnik v akciji, kliknite gumb "Fire A Reveal Modal" na predstavitveni strani.
5. Simpatična pogovorna okna
Kliknite križec na predstavitveni strani, da vidite vtičnik v akciji.
6. Modalno okno Mootools, vtičnik "MooDialog"
7.jQuery pojavna vrstica na vrhu zaslona
8.jQuery pojavno okno
Vtičnik jQuery za prikaz obrazca za povratne informacije v pojavnem oknu.
10. Vtičnik MooTools "LightFace" za implementacijo pogovornih oken Facebook
Pogovorna okna v stilu Facebooka. Poleg statičnih informacij je mogoče v okna postaviti slike, okvirje, zahteve Ajaxa. Veliko nastavitev vtičnikov, zelo zmogljivo orodje. Izgleda zelo elegantno in funkcionalno. Sledite povezavam na demo strani in si oglejte primere z različno vsebino.
11.jQuery modalni
Čedno pojavno pogovorno okno jQuery.
12. Modali jQuery
Simpatična pojavna modalna okna. Trije stili. Demo stran ponuja 3 povezave za klicanje oken.
13. Modali jQuery
Pojavna modalna okna več vrst. Če si želite ogledati vtičnik v akciji, kliknite povezavo na predstavitveni strani.
15. Pojavno sporočilo nad stranjo
Sporočilo se prikaže na strani, ki je nato zatemnjena. Kliknite "Klikni me" na predstavitveni strani, da se prikaže pojavno sporočilo. S klikom na križec ga zaprete. Izvedeno z jQuery.
16. Modalno okno "ModalBox" v javascriptu
Implementacija sodobnih modalnih pogovornih oken brez uporabe pojavnih oken in ponovnega nalaganja strani. Na predstavitveni strani kliknite gumb "Začni demo", da vidite, kako skript deluje.
17. Vtičnik "Leightbox" z uporabo knjižnice Prototype
Vtičnik za prikazovanje vsebine v modalnih oknih.
Precej pogosto lahko najdete modale na spletnih mestih in vsi se uporabljajo za različne naloge. Dejansko je to precej zmogljivo orodje, ki vam omogoča, da vmesnik spletnega mesta naredite bolj interaktiven in uporabniku prijazen. Na primer, modalna okna se lahko uporabljajo za različne oblike, kot so obrazec za avtorizacijo, obrazec za povratne informacije, naročanje izdelka in nikoli ne veš.
V tej objavi si bomo ogledali primer, kako narediti modalno preprosto okno z uporabo jQuery in CSS. Posebnost tega primera je, da tukaj ni potreben, z izjemo same knjižnice jQuery.
Postavite modalno kodo na stran:
blizu
Odprite modalno okno
Kot lahko vidite iz oznake, je blok modalnega okna sam div z atributom id = modalna_oblika ki vsebuje element span z id = modal_close... Ta element bo služil kot gumb za zapiranje modalnega okna, poleg tega je pod blokom div z atributom id = prekrivanje, ki hkrati služi za zatemnitev ozadja. Modalno okno se odpre s sklicevanjem na razred modalni.
Za modalna_oblika nastavili smo fiksno širino in višino ter nato položaj centrirali na sredino zaslona. Za modalno podlago ( prekrivanje) velikost nastavimo na širino zaslona, zapolnimo s prosojnostjo in jo privzeto tudi skrijemo. Poseben trenutek z z-indeks, modal mora imeti največji od vseh elementov na strani, naslovnica pa največja od vseh razen modala samega.
Zdaj k najosnovnejšemu, to je koda javascript. Za modalno okno bosta uporabljena dva glavna dogodka, to je njegovo odpiranje - klik na element z razredom modalni, v našem primeru je to povezava, zapiranje modalnega okna pa je klik na naslovnico ( prekrivanje), ali kliknite na gumb za zapiranje, v našem primeru gre za element span z id = modal_close.
Z animirano spremenimo navpični položaj vrh, pa tudi preglednost motnost, s tem pa dobimo zanimiv učinek. Podoben učinek se uporablja tako, ko je okno odprto in ko je zaprto. Razlika je v tem, da se spremeni vrstni red uporabe lastnosti za bloke, s čimer se vizualizira odpiranje in zapiranje okna.
3. Primer modalnega okna jQuery, ki se kliče s sklicevanjem (z predstavitvijo)
Najverjetneje ste že večkrat videli pojavno modalno okno na internetu - potrditev registracije, opozorilo, informacije o pomoči, prenos datoteke in še veliko več. V tej vadnici bom navedel nekaj primerov, kako ustvariti najosnovnejša modalna okna.
Kako ustvariti preprost pojavni modal
Začnimo preučevati kodo najpreprostejšega modalnega okna, ki se bo takoj prikazalo koda jQuery
Prilepite kodo kamor koli noter telo Vaša stran. Takoj po nalaganju strani, brez ukazov, boste videli okno, ki izgleda takole:
Toda naslednja koda se bo izvršila, ko bo celotna stran naložena v brskalnik. V našem primeru se po nalaganju strani s slikami prikaže preprosto pojavno okno:
Pokličite modalno okno jQuery s sklicevanjem s CSS
Naslednji korak je ustvarjanje modalno okno ob kliku na povezavo. Ozadje se bo počasi zatemnilo.
Pogosto lahko vidite, da se obrazci za prijavo in registracijo nahajajo v takih oknih. Pa se lotimo posla
Najprej napišimo html del... To kodo postavimo v telo vašega dokumenta.
Klicanje modalnega okna
Modalno besedilo
Zapri
Besedilo v modalnem oknu.
koda CSS... Bodisi v ločeni datoteki css ali v
V kodi jQuery se bomo osredotočili na položaj modala in maske, v tem primeru pa postopoma zatemnili ozadje.
Pozor! Ne pozabite vključiti knjižnice v glavo dokumenta!
Povezovanje knjižnice z Googlovega spletnega mesta. No, sama koda jQuery.
Koda JQuery
Modali so sestavni del sodobnega spletnega oblikovanja, z njimi se lahko razvijalec zateče k metodi zanke na eni strani in obiskovalca ne meče na sekundarne strani. V tej vadnici si bomo ogledali, kako ustvariti osupljive modale zamegljenega ozadja za vaše spletno mesto z uporabo jQuery in CSS3. Zahvaljujoč tem pravilom bomo ob pojavu okna ustvarili zamegljeno ozadje, ki bo pogled obiskovalca vezalo le na potrebne informacije na spletnem mestu.
Modali z zamegljenim ozadjem CSS3
Najboljše gospodarske novice so samo tukaj: Drobaha
Animacija okna bo nastavljena tako, da bo ob kliku na gumb videza okno animirano od zgoraj navzdol, medtem ko se zameglitev ozadja samodejno izboljša.
1. korak. HTML
Imeli bomo vsebnik, ki bo vseboval: naslov, opis, nato dodamo razred za gumb z razredom preklopni modalni da odprete modalno okno:
Naslov
Opis
Naslov za okno
Zavihki so zelo zanimiva in priročna stvar pri izdelavi spletne strani, omogočajo pravilno organiziranje informacij, hkrati pa prihranijo malo prostora na strani.
Nato moramo dodati razred modalni je-aktiven, bo ta razred odgovoren za klic modalnega okna, modal__header odgovoren za naslov in njegovo oblikovanje okna.
2. korak. CSS
Zdaj pa pojdimo na styling, prvi korak bo razred gumb, ki bo odgovoren, ste uganili, za gumbe na spletnem mestu, smo zanj nastavili pravilne parametre prikaza:
Slogi so precej preprosti, shranjeni so v ločeni datoteki in ne bi smeli povzročati težav pri urejanju za razvijalca, ki je že kdaj naletel na CSS.
3. korak. JS
Naša zadnja, a nič manj pomembna bo nastavitev samodejnega zameglitve ozadja, ko se prikaže meni, pa tudi klikljivost povezav, pri čemer nam bodo ta majhna pravila pomagala Js:
Primeri funkcije jQuery setTimeout () Javascript preprečuje, da bi več časovnikov hkrati izvajalo setinterval
DIY amaterska radijska vezja in domači izdelki
Obrežite eno ali večvrstično besedilo po višini z dodatkom elips. Dodajanje preliva besedilu