Modal CSS: Enostavno, hitro in priročno

Lastnosti HTML5 /CSS3 razvijalcem omogočajo, da hitro ustvarijo logična pogovorna okna z možnostjo vnosa majhnih količin informacij, potrditve dejanja ali obvesti obiskovalca.

Funkcionalnost, ki jo nudijo funkcije javascript, je na voljo za preprosto kodo HTML in več pravil CSS. Učinek ne bo nič manj, v nekaterih primerih celo večji.

Vsebina modalnega okna

Prikažite informacije in potrdite prejem: okno se prikaže v brskalniku in stran od obiskovalca pričakuje, da potrdi, da berejo določene informacije. Izhodna vprašanja in odgovor: da ali ne. Izhodna polja (oblika, poizvedba) in dobite besedilo, podatke ali niz vrednosti v vseh poljih obrazcev.


Variante uporabe modalnega okna lahko dobite z nizom, v resnici pa je to običajna oznaka HTML. Uporabljajo se lastnost psevdo-razreda: cilj in pointer-events. Prvi določa, kaj storiti, ko premikate miško (drugi kazalec). Drugi omogoča elementu, da se lahko ponovno odzove na dogodke.

Primer informacijskega okna

Slika prikazuje povezavo, ki jo predpomnilnik odpre z modalnim CSS z informacijami. Šele potem, ko obiskovalec klikne na "zapiralni element" okna - "X", okno izgine in prikaže se povezava, ki odpre okno. Pogovorno okno se začne z oznako "a" in konča z oznako "a". Možnosti za uresničitev te zamisli lahko prinesejo veliko.
V tem primeru je opisni slog povezave do odprtja okna inzaprtje se izvaja na različne načine. Prva povezava naredi viden id id scWiindow, ki ustvarja iluzijo odpiranja okna, v katerem so informacije in samo en gumb (link) za zapiranje.


Dokler se okno ne zapre, se na strani ne bo ukrepalo. Z uporabo modalnega okna HTML /CSS lahko oblikujete kontrole, ki se takoj prikažejo na strani, blokirajo kontrole in omogočajo prilagoditev želenih nastavitev. Po zaključku postopka lahko obnovite logiko strani v običajnem načinu.

Dinamika pojavnih oken

Sodobne značilnosti HTML5 /CSS3 podpirajo vsi brskalniki. Razvijalec ima široko paleto funkcionalnosti za uporabo preliva, preglednosti, transformacije, premikanja, transformacije, rotacije in drugih dejanj oznak.
Nič preprečuje medsebojno kombiniranje različnih učinkov v iskanju popolnih oblik in prvotnega oblikovanja. Modalno okno na CSS je ideja uporabe pointer-dogodkov in: target, vendar nam nič ne preprečuje uporabe drugih pravil stilov. Vendar je treba z zaskrbljenostjo oblikovati zasnovo, ki lahko preseneti vsakega obiskovalca, je treba opozoriti: JavaSript je urejen način ustvarjanja dialoga. Tukaj lahko nadzorujete vse. Preprost CSS modal, ki uporablja kombinacijo gradientnih oznak, preoblikovanja in videza skozi rotacijo (na primer), je jamstvo za veliko zamudo pri delu strani. Sodobni slogi so različne možnosti, vendar so te funkcije dosledno implementirane v algoritme učinkovitosti.Hipertekst in pravila CSS. Tukaj lahko upravljate samo preko vrednosti pravil in velikosti prikazanih oznak.
Velikost velikosti oznak, kompleksna kombinacija prelivov - zagotovilo, da se bo stran prikazala z zamudo ali se bo pojavil modalni CSS, ko bo obiskovalec že izčrpan.

Sistemi za upravljanje mesta

Z modalnimi okni lahko izdelate sisteme po meri za funkcionalne strani. Ckeditor & amp; CSS za Drupal 7 je dober primer ustvarjanja modalnih dialogov. Z velikim arsenalom funkcij API-ja in orodjem orodja tega priljubljenega sistema za upravljanje spletnih mest lahko hitro in učinkovito upravljate s pravili brez temeljitega poznavanja HTML5 /CSS3, torej neprofesionalnih razvijalcev.
Drugi sistemi za upravljanje območij predstavljajo svoje različice uporabe modalnih oken in zamisli o takem dialogu. Uporaba javascripta je lahko skrita ali uporabljena za druge namene, vendar je bistveno, da kateri koli CMS ne dovoljuje razvijalcem (uporabniku), da pretiravajo pri ustvarjanju kompleksnega in zamudnega prikaza dizajna. Uporaba sistemov za upravljanje spletnih strani je danes priljubljen način ustvarjanja spletnih virov, ki samodejno uporablja sodobne funkcije za ustvarjanje modalnih oken iz tabel CSS in ne zahteva dejanskega znanja o tem, kako deluje v resnici.

Identiteta logike dialoga na straneh

Prednost uporabe slogov pri uporabi javascripta je, da lahko nekoč opišemo logiko dialoga v vseh različicah modalnega modela.okna:
  • izhodne informacije za informacije;
  • zahteva za potrditev operacije;
  • spreminjanje parametrov strani;
  • vnos podatkov itd.
  • Po dialogu (za vse možnosti možnih zahtev s strani in odgovorov obiskovalca) se lahko uporablja na enak način za tekoče delo in ustvarjanje podobnih spletnih virov.
    javascript ne ponuja takšne priložnosti, temveč zagotavlja upravljani dialog. Skript je treba prilagoditi v vsakem primeru. Logika programiranega dialoga se razlikuje od opisne v HTML /CSS. Vsaka možnost ima svoje prednosti. Najboljša rešitev je združiti in uporabiti minimalne zmogljivosti vsake možnosti. Razvijalec lahko uporablja kompleksne in spektakularne značilnosti sodobnih orodij pri razvoju spletnih mest, vendar je zaželen pameten pristop k oblikovanju, ki združuje prednosti vsake možnosti.

    Dinamično oblikovanje

    Modalno polje CSS je niz več nizov pravil za več oznak. javascript je zmožnost dinamičnega ustvarjanja oznak in slogov. V tem kontekstu lahko pišete prenesene funkcije, ki ne zahtevajo povezave v celotni funkcionalnosti spletnega mesta, in njegov pomožni arzenal. V tej implementaciji take ideje lahko razvijete funkcije, ki na pravi način ustvarjajo pogovorna okna, razvijalec pa ne sme posredovati delov kode iz tabele HTML in CSS v druge modele.
    S povezavo ene js-datoteke, ki vam omogoča, da ustvarite okna, specifična za okna, tako da pokličete ustrezno funkcijo, lahkooptimalno združuje prednosti upravljanih in opisnih možnosti za ustvarjanje modalnega okna CSS in HTML.

    Sorodne publikacije