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

Planlegger en vellykket migrering fra Windows XP

Med slutten av støtten til Windows XP rett rundt hjørnet, 8. april, kan brukerne av det 13 år gamle operativsystemet endelig bli slått på for å gjøre flyttingen til et nyere OS. Det er anslått at så mange som 1/3 av PCene som er i bruk, fortsatt kjører en versjon av XP, og tidsfristen vil la brukerne være utsatt for hackere og tap av dataintegritet.Hvis du pl

(Tekniske og design tips)

100 gratis nyttige bærbare programmer du bør vite

Bærbare apper er programvaren som krever ingen installasjon i motsetning til vanlige kjørbare apper, men husk fortsatt dine historikk- og konfigurasjonsalternativer i motsetning til zip-apper. I dette innlegget viser vi de 100 beste bærbare appene du kan bære i en penn stasjon eller telefonens lagringsplass eller SD-kort.Bær

(Tekniske og design tips)