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).

Hvorfor du ikke bør stole på suksesshistorier

Suksesshistorier har vært en vanlig del av vår kultur og samfunn siden uendelig tid. Selv om begrepet er relativt nytt, vil jeg likevel telle alt fra heroiske forteller om David og Goliath, og Hercules til vellykkede krigskampagner om Joan of Arc, Genghis Khan og Napoleon i denne konteksten.Kommer tilbake til den moderne tiden, vokste vi opp og lyttet til og lese om suksesshistorier om Steve Jobs, Bill Gates, Michael Jordan, JK Rowling ..

(Tekniske og design tips)

7 tips for å få deg til forfatteren, alle som ønsker å lese

Har du noen gang lurt på hva det egentlig er som skiller en stor forfatter fra en gjennomsnittlig forfatter ? Det åpenbare svaret ville være talent. Men spør en god forfatter og de ville argumentere for poenget. Det er massevis av gjennomsnittlige forfattere der ute med så mye talent som noen . Det er bare at det er noe punkt, en linje i sanden, at de ikke er villige til å krysse det som hindrer dem i å bryte gjennom .Mer en

(Tekniske og design tips)