Modalni CSS: Jednostavan, brz i praktičan

HTML5 /CSS3 svojstva daju programerima mogućnost brzog kreiranja logičkih dijaloga s mogućnošću unosa malih količina informacija, potvrde akcije ili informiranja posjetitelja.

Funkcionalnost koja se pruža preko javascript funkcija dostupna je za jednostavan HTML kod i nekoliko CSS pravila. Učinak neće biti manji, au nekim slučajevima i veći.

Sadržaj modalnog prozora

Prikažite informacije i potvrdite njihov primitak: prozor se pojavljuje u pregledniku, a stranica očekuje da posjetitelj potvrdi da čita određene informacije. Izlazna pitanja i odgovor: da ili ne. Izlazna polja (oblik, upit) i dobivaju tekst, podatke ili skup vrijednosti u svim poljima obrasca.


Varijante korištenja modalnog prozora mogu sadržavati skup, ali u stvarnosti to je uobičajena HTML oznaka. Korištena su svojstva pseudo-klase: target i pointer-events. Prvi određuje što učiniti kad se mišem (drugim pokazivačem) prikazuje veza. Drugi omogućuje elementu da ponovno reagira na događaje.

Primjer prozora s informacijama

Slika prikazuje vezu koja se otvara s privremenim CSS-om s informacijama. Tek nakon što posjetitelj klikne na "završni element" prozora - "X", prozor nestaje, a ponovno će se pojaviti veza za otvaranje prozora. Dijalog počinje oznakom "a" i završava oznakom "a". Mogućnosti za provedbu ove ideje mogu smisliti mnogo.
U ovom primjeru, stil opisa veze do otvaranja prozora ido njegovog zatvaranja izvršava se na različite načine. Prvi link čini vidljivim id id scWiindow, koji stvara iluziju otvaranja prozora u kojem se nalaze informacije i samo jedan gumb (link) za zatvaranje.


Na stranici se neće poduzimati nikakve radnje dok se prozor ne zatvori. Pomoću modalnog prozora HTML /CSS možete dizajnirati kontrole koje se odmah pojavljuju na stranici, blokirati kontrole i omogućiti vam da prilagodite željene postavke. Po završetku procesa, možete vratiti logiku stranice u normalnom načinu rada.

Dinamika popup prozora

Moderne značajke HTML5 /CSS3 podržavaju svi preglednici. Programer ima širok raspon funkcionalnosti za korištenje gradijenta, transparentnosti, transformacije, premještanja, transformacije, rotacije i drugih akcija oznaka.
Ništa ne sprečava međusobno kombiniranje različitih efekata u potrazi za savršenim oblicima i izvornim dizajnom. Modalni prozor na CSS-u je ideja korištenja pointer-događaja i: targeta, ali nam ništa ne sprječava korištenje drugih pravila stilova. Međutim, s marljivošću dizajniranja dizajna koji može iznenaditi svakog posjetitelja, treba napomenuti: JavaSript je uspio način stvaranja dijaloga. Ovdje možete kontrolirati sve. Jednostavan CSS modal koji koristi kombinaciju gradijentnih oznaka, transformacije i izgleda kroz rotaciju (na primjer) jamstvo je značajnog kašnjenja u radu stranice. Suvremeni stilovi su raznovrsne mogućnosti, ali te se osobine strogo primjenjuju u algoritmima izvedbe.Hipertekst i CSS pravila. Ovdje možete upravljati samo kroz vrijednost pravila i veličinu prikazanih oznaka.
Veličina velikih oznaka, složena kombinacija gradijenta - jamstvo da će stranica biti prikazana s odgodom ili će se pojaviti modalni CSS kada posjetitelj već ima iscrpljeno strpljenje.

Sustavi za upravljanje mjestima

Možete stvoriti prilagođene sustave kontrole za funkcionalne stranice putem modalnih prozora. Ckeditor & amp; CSS to Drupal 7 je dobar primjer stvaranja modalnih dijaloga. Pomoću velikog arsenala API funkcija i alata ctools ovog popularnog sustava za upravljanje web stranicama, možete brzo i učinkovito manipulirati pravilima bez dubokog poznavanja HTML5 /CSS3, tj.
Drugi sustavi upravljanja gradilištima predstavljaju svoje varijante korištenja modalnih prozora i ideja o takvom dijalogu. Korištenje javascripta ovdje se može sakriti ili primijeniti u druge svrhe, ali je bitno da bilo koji CMS ne dopušta programeru (korisniku) da pretjeruje u stvaranju složenog i dugotrajnog prikaza dizajna. Korištenje sustava za upravljanje web-mjestima danas je popularan način stvaranja web-resursa, automatski koristeći moderne značajke za kreiranje modalnih prozora iz CSS tablica i ne zahtijeva stvarno znanje o tome kako to radi u stvarnosti.

Identitet logike dijaloga na stranicama

Prednost primjene stilova na korištenje javascripta jest da se jednom može opisati logika dijaloga u svim varijantama modalnogprozori:
  • izlazne informacije za informacije;
  • zahtjev za potvrdu operacije;
  • promijenite parametre stranice;
  • unos podataka, itd.
  • Nakon dijaloga (za sve opcije mogućih zahtjeva s web-mjesta i odgovora posjetitelja), može se koristiti na isti način za tekući rad i stvaranje sličnih web-resursa.
    javascript ne pruža takvu mogućnost, ali osigurava upravljani dijalog. Skripta se mora prilagoditi u svakom slučaju. Logika programiranog dijaloga razlikuje se od deskriptivne kroz HTML /CSS. Svaka opcija ima svoje zasluge. Najbolje rješenje je kombinirati i koristiti minimalne mogućnosti svake opcije. Razvojni inženjer može primijeniti složene i spektakularne značajke modernih alata u razvojnim stranicama, ali pametan pristup dizajnu koji kombinira prednosti svake opcije je najpoželjniji.

    Dinamičko oblikovanje

    CSS Modal Box je skup nekoliko skupova pravila za više oznaka. javascript je mogućnost dinamičkog stvaranja oznaka i stilova. U tom kontekstu, možete napisati prenesene funkcije koje ne zahtijevaju vezu u cjelokupnoj funkcionalnosti web-mjesta i njegov pomoćni arsenal. U ovoj implementaciji takve ideje, možete razviti značajke koje stvaraju dijaloge na pravi način, a programer ne smije proslijediti dijelove koda iz HTML-a i CSS-tablice u njihove druge dizajne.
    Spajanjem jedne js-datoteke koja vam omogućuje stvaranje prozora specifičnih za prozor pozivanjem odgovarajuće funkcije, možeteoptimalno kombinirati prednosti upravljanih i opisnih opcija za stvaranje modalnog prozora na CSS-u i HTML-u.

    Povezane publikacije