JQuery modaal venster - waar is het voor en hoe installeer je het

Inhoudsopgave:

JQuery modaal venster - waar is het voor en hoe installeer je het
JQuery modaal venster - waar is het voor en hoe installeer je het
Anonim

Om het antwoord op uw vraag te vinden, moet u soms veel tijd besteden, vooral als, wat betreft webdesign, een persoon die niet bijzonder thuis is in dergelijke zaken, heeft besloten een site te maken alleen. Een jQuery modaal venster kan zo'n pijnlijke taak zijn.

Je kunt veel van dergelijke vensters op internet vinden. Het lijkt erop dat u ze alleen maar hoeft te kopiëren en op uw site te plakken … Niet alles is echter zo eenvoudig. Het toeval wil dat er een detail is dat alles vertraagt, en het is onmogelijk om de taak op te lossen, omdat hier geen kennis voor nodig is. Daarom, in plaats van onmiddellijk een modaal venster op jQuery te pesten met veel interessante functies die moeilijk te implementeren zijn, is het beter om te beginnen met een klein, eenvoudig modaal venster zonder onnodige problemen.

Als er ergens op wordpress een blog is, dan is alles heel eenvoudig, en meestal zijn er geen problemen, omdat het al veel kant-en-klare oplossingen heeft - verschillende pop-upmodules. Maar er zijn ook totaal verschillende opties waarbij je zelf een modaal venster moet ‘boetseren’ of je moet wenden tot betaalde diensten van specialisten. Zoals u weet, wil niemand betalen, vooral niet als het erop lijkt dat u de zaak tot op de bodem moet uitzoeken en alles vrij snel enhelemaal gratis.

Er is een jQuery modaal venster nodig om inhoud weer te geven die bij de informatie op de pagina past en deze aanvult.

jQuery - wat is het?

Voor een volledig begrip, als iemand het niet weet, dan is jQuery een JavaScript-bibliotheek, en de laatste betekent op zijn beurt een stukje code dat is ingesloten in de code van een webpagina en waarmee u kunt bereiken verschillende effecten die niet kunnen worden geïmplementeerd in HTML en CSS. Een typisch voorbeeld van zo'n stukje code is de huidige datum of tijd die op de pagina wordt weergegeven.

De ontwikkelaars van de bibliotheek hebben een officiële website, die voortdurend wordt verbeterd en bijgewerkt, in verband waarmee alle nieuwe versies nieuwe bibliotheken aanbieden.

Om jQuery te vertellen dat je dit of dat effect nodig hebt, is er een CSS-taal met stylesheets.

CSS-taal

CSS betekent Cascading Style Sheets. Het is nu onmogelijk om een site op internet te vinden die deze taal niet gebruikt.

Daarom zijn jQuery en CSS in modale vensters bijna onmisbaar en onmisbaar. Daarom, als jQuery niet is inbegrepen, moet u dit doen.

Om dit te doen, wordt het volgende ingevoegd in de head-tag:

jQuery
jQuery

Waar zijn modaliteiten voor?

Een eenvoudige jQuery-modaliteit die verschijnt wanneer de site wordt geladen, kan handig zijn om meer volgers te krijgen. Het venster verschijnt wanneer de pagina wordt geopend. Het is niet erg afleidend en het is onwaarschijnlijk dat iemand bang zal zijn, omdat het bij het minste ongemak gemakkelijk te doen issluit, en de sluitknop zal cookies bevatten, en wanneer u erop klikt, zal het verdwenen modale venster niet meer verschijnen.

Pop-upvenster

Een jQuery pop-upvenster dat maar één keer per pagina verschijnt, is een variatie op modale vensters.

Om het te implementeren, moet een aantal stappen worden genomen.

Je kunt speciale plug-ins gebruiken voor modale vensters. Het is het beste om ze te downloaden van ontwikkelaarssites zoals arcticModal. Het verbindt als volgt:

jQuery modaal venster
jQuery modaal venster

Zonder vensterstijl ziet een van de standaard plug-inthema's er als volgt uit:

jQuery eenvoudig modaal venster
jQuery eenvoudig modaal venster

Vervolgens is de cookie-plug-in verbonden:

jQuery modaal venster
jQuery modaal venster

HTML-code schrijven die de gebruiker informatie verschaft:

jQuery modaal venster
jQuery modaal venster

De arctimonial-close class gespecificeerd in de code betekent dat het jQuery modale venster ermee zal sluiten.

Vervolgens komt het laatste script:

jQuery pop-up modaal
jQuery pop-up modaal

Sommige van de gebruikte parameters betekenen het volgende:

closeOnOverClick: bepa alt of het venster wordt gesloten wanneer op de overlay wordt geklikt.

CloseOn Esc: betekent klikken op Esc.

Expires: Specificeert de tijd gedurende welke de cookie wordt opgeslagen. In de voorgestelde versie is deze tijd zestig dagen, dat wil zeggen dat het venster twee maanden niet wordt weergegeven. De cookie wordt bij elk bezoek bijgewerkt.

Leren hoe te installeren op uwjQuery modaal venster op de site, u kunt indien nodig doorgaan naar meer complexe opties. Hiervoor worden verschillende CSS-stijlen toegevoegd, en het venster zal compleet anders worden dan modale vensters op andere sites.

Fantasie en verbeeldingskracht zullen helpen om het aantal abonnees aanzienlijk te verhogen dankzij dergelijke oplossingen, en vakkundig ingevoegde modale vensters in online winkels kunnen de verkoop vele malen verhogen. Daarom zal de tijd die wordt besteed aan het programmeren en installeren van Windows gerechtvaardigd zijn en zeker zijn vruchten afwerpen!

Soorten modale vensters

Modal-vensters kunnen pop-upvensters zijn wanneer u op de overeenkomstige knop klikt of samen met de pagina worden geladen en onmiddellijk na het laden verschijnen. Ze kunnen gedurende een bepaalde periode niet meer verschijnen bij het sluiten als er een cookie is ingesteld, zoals in het hierboven beschreven voorbeeld, of ze kunnen elke keer dat de pagina wordt geladen verschijnen. Er zijn modale vensters die op één plaats zijn vastgezet en erop blijven staan, ondanks bewegingen op de pagina, en dynamisch kunnen zijn wanneer het venster informatie met een link bevat en de gebruiker er doorheen gaat. Dan wordt alleen het venster bijgewerkt, terwijl de originele pagina ongewijzigd blijft.

Aanbevolen: