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

15 Android og iOS Bluetooth-spill for å prøve - Best of

Det er hundrevis av online multiplayer-spill hvor du spiller med fremmede, men når du vil spille et slikt spill med familie eller venner, vil det beste valget være Bluetooth-spill. Med Bluetooth-baserte spill kan du koble til vennenes telefon for å spille mot hverandre eller bli med i en allianse i sanntid.Hv

(Tekniske og design tips)

25 billige mekaniske tastaturer du kan kjøpe

Mekaniske tastaturer er generelt mye bedre når det gjelder kvalitet i forhold til standardmembran PC-tastaturer. De gir bedre taktil tilbakemelding når de er skrevet, er mer holdbare da de varer nesten 50 ganger lengre i forhold til vanlig tastatur.Mekaniske tastaturer kan være dyre ; en god en kan lett koste deg mer enn $ 150. H

(Tekniske og design tips)