Opprett, kontroller og tilpasser bedre Modal Window for nettstedet ditt ved hjelp av Vex

Et modalvindu er veldig nyttig når du vil gjøre brukerne i kontakt med nettstedet ditt . Noen ganger kalles et modalt vindu som en modalboks som vinduet brukes til å vise dialogboksen . I en tidligere artikkel hadde vi guidet deg gjennom en veiledning om hvordan du lager modale vinduer med Bootstrap Plugin.

I dette innlegget vil vi introdusere deg til en annen stor hjelper for å lage modale vinduer, ved hjelp av jQuery-biblioteket, nemlig Vex .

Vex er et komplett og svært tilpassbart Javascript-bibliotek som hjelper deg med å lage modale vinduer med letthet. Denne lette jQuery-plugin erstatter nettleserens innfødte dialogboks.

Grunnleggende oppsett

Først må vi forberede Vex-skriptet. Du kan laste den ned her. Deretter inkluderer du den siste jQuery i overskriften med følgende skript.

For å bruke Vex må du inkludere vex.js og vex.css filene. I stedet for å bruke vex.js og vex.dialog.js, kan du bare inkludere vex.combined.js eller vex.combined.min.js .

Nå legger vi disse Vex-bibliotekene til toppteksten slik.

I det ovennevnte skriptet inkluderer jeg vex-theme-os.css som er et annet brukervennlig Vex-tema. Hvis du vil bruke et annet tema, kan du se dokumentasjonen som følger med demoen her.

Bruk av Vex

De mest grunnleggende metodene i Vex er vex.dialog.alert, vex.dialog.confirm og vex.dialog.prompt . Og det er vex.dialog.open som er kombinasjonen av disse metodene for mer forhåndsbruk, for eksempel å lage skjema, innlogging eller flere modalvinduer .

Og nå skal vi prøve å bygge et enkelt innloggingsmodalvindu ved hjelp av vex.dialog.open metoden. Før vi starter metoden, må vi først bruke det temaet vi brukte med alternativet defaultOptions.className . Hvis du vil bruke temaet, kan du enkelt legge til temaet som et verdialternativ som det.

 vex.defaultOptions.className = 'vex-theme-os'; 

Som nevnt tidligere er vex.dialog.open metoden i utgangspunktet kombinasjonen av 3 andre metoder. Følgende kode er en mer kompleks demo der vi kaller alert, confirm og prompt internt til å bygge en innloggingsdialog.

Så vil vår innloggingsboks vises som følger.

Endelig tanke

Det er mange andre verktøy for å opprette modalvindu der ute, men Vex er en ganske komplett og svært konfigurerbar en. Du kan legge til varsler, meldinger, bekreftelse, skjemaer eller andre innspillingsalternativer i boksen og til og med animere den . Andre flotte funksjoner er flere modale vinduer og dialogbokser i modale bokser, det går bra og jevnt i mobile enheter.

Vex kommer også med ferdige temaer for å få dialogen til å møte stilen din, enten det er på CSS eller SASS. Den er også kompatibel med de fleste moderne nettlesere og svært lys - bare under 7kb minified (2kb minified + gzipped).

Avdekke laserskjerm-lokket Gjør Macbook-tilpasning til neste nivå

En vanlig måte at de fleste brukere kan tilpasse Macbooken, er ved å stikke Macbook-dekaler og klistremerker på forsiden av MacBook-ene. Så pekte en av våre forfattere oss på å avdekke. Avdekke gir Macbook-eiere en ekstrem måte å personliggjøre sine Macbooks på - de skjærer ting rett inn i Macbook-dekselet.Vi snakket

(Tekniske og design tips)

10 E-handel UX-tips for å optimalisere filtrert navigering

Filtrert navigering er en populær nettsidefunksjon som i dag brukes rutinemessig på e-handelsnettsteder . Det tjener formålet med å hjelpe kundene med å finne produktet de leter etter i store datasett .Tenk på filtene du kan angi for et produktsøk på eBay eller Amazon, for eksempel kategorien, materialet eller varemerket til et produkt.Hvis du

(Tekniske og design tips)