Creëer, bedien & verbeter Better Modal Window voor uw site met behulp van Vex

Een modaal venster is erg handig wanneer u gebruikers wilt laten communiceren met uw site . Af en toe wordt een modaal venster een modale box genoemd terwijl het venster wordt gebruikt om het dialoogvenster weer te geven . In een vorig artikel hebben we je door een tutorial laten leiden over het maken van modale vensters met de Bootstrap-plug-in.

In deze post zullen we je voorstellen aan een andere grote helper voor het maken van modale vensters, met behulp van jQuery-bibliotheek namelijk Vex .

Vex is een complete en zeer aanpasbare JavaScript-bibliotheek waarmee u gemakkelijk modale vensters kunt maken. Deze lichte jQuery-plug-in vervangt het native dialoogvenster van de browser.

Basisinstellingen

Eerst moeten we het Vex-script voorbereiden. Je kunt het hier downloaden. Voeg vervolgens de nieuwste jQuery toe aan de header met het volgende script.

Om Vex te gebruiken, moet u de vex.js en vex.css bestanden opnemen. In plaats van vex.js en vex.dialog.js, kunt u alleen vex.combined.js of vex.combined.min.js .

Nu voegen we die Vex-bibliotheken als volgt aan de header toe.

In het bovenstaande script vex-theme-os.css ik vex-theme-os.css, een ander gebruiksklaar Vex-thema. Als u een ander thema wilt gebruiken, kunt u hier de documentatie bij de demo bekijken.

Vex toepassen

De meest basismethoden in Vex zijn vex.dialog.alert, vex.dialog.confirm en vex.dialog.prompt . En er is vex.dialog.open wat de combinatie is van die methoden voor meer gebruik vooraf, bijvoorbeeld om een formulier, login of meerdere modaal venster te maken .

En nu proberen we een eenvoudig vex.dialog.open methode vex.dialog.open . Voordat we aan de methode beginnen, moeten we eerst het thema toepassen dat we hebben gebruikt met de optie defaultOptions.className . Om het thema toe te passen, kunt u eenvoudig de thema-naam toevoegen als een waarde-optie, zoals zo.

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

Zoals eerder vermeld, is de methode vex.dialog.open in feite de combinatie van 3 andere methoden. De volgende code is een complexere demo waarin we intern een alert, confirm en prompt om een ​​login-dialoogvenster te maken.

Dus ons inlogvak zal als volgt verschijnen.

Laatste gedachte

Er zijn veel andere tools om een ​​modaal venster te maken, maar Vex is een nogal complete en goed configureerbare. U kunt waarschuwingen, aanwijzingen, bevestigingen, formulieren of andere invoeropties aan de box toevoegen en deze zelfs animeren . Andere geweldige functies zijn meerdere modale vensters en dialoogvensters in modale vakken, het werkt geweldig en soepel op mobiele apparaten.

Vex wordt ook geleverd met kant-en-klare thema's om het dialoogvenster aan uw stijl te laten voldoen, zij het op CSS of SASS. Het is ook compatibel met de meeste moderne browsers en zeer licht - alleen onder 7 kb verkleind (2 kb minified + gzipped).

Waarom is het belangrijk om Coding to Kids in 2017 en Beyond te leren

Een paar decennia geleden werd het goed kunnen communiceren (vooral in het Engels) beschouwd als een teken van kwaliteitsonderwijs en een fundamentele vereiste in de professionele wereld.Maar dat was toen. Vandaag verandert de wereld in een tempo dat we nog nooit hebben gezien. Websites, applicaties en hulpmiddelen zijn gemaakt om ons leven gemakkelijker te maken

(Technische en ontwerptips)

10 mobiele chat-apps om berichten anoniem te verzenden

Het oversharing-fenomeen is een echte strijd. Uit de context geraakte meningen worden afgekeurd, uit proporties geblazen en brengen soms schade toe aan het leven van de deler. Soms willen we echter dingen uit onze kassen halen onder anonimiteit en mensen vinden die u kunnen helpen om te handelen of zich te concentreren op uw probleem in plaats van de persoon erachter

(Technische en ontwerptips)