Hoe jQuery te gebruiken om Modal Pop-Up te genereren wanneer erop wordt geklikt
Een modal box is een pop-upvenster dat de gebruiker dwingt om te interageren met het voordat u terugkeert naar de site. Modal boxes zijn handig voor waarschuwingen, informatieve vensters en meer. U kunt een modal box met jQuery. Als u niet bekend bent met jQuery, raadpleegt u ons artikel jQuery Basics voor een uitleg van de werking van jQuery.
Dit is een interactieve codeweergave die u de HTML, CSS, jQuery en een demo van de uitvoer laat zien.
Modal HTML
Om een modal pop-up te maken, moet u eerst de HTML-structuur vaststellen.
U moet klassen maken voor de pop-up overlay en de pop-up inhoud, zodat u ze apart van de rest van het document kunt bewerken.
Dit voorbeeld maakt de “popup-overlay” en “popup-content” klassen om CSS in staat te stellen het specifiek te stijlen.
Let op de knop elementen in dit voorbeeld. We hebben knoppen toegevoegd die we willen gebruiken om de pop-up te starten. Een knop heeft de class “open” gekregen, terwijl de andere de class “close” heeft. Deze worden later gebruikt om de pop-up te openen en te sluiten.
Modal CSS
In de CSS moet je de “popup-overlay” en de “popup-content” classes zo stijlen dat ze in eerste instantie verborgen zijn. Een pop-up zou geen pop-up zijn als hij vanaf het begin zichtbaar was. We kunnen de pop-up verbergen door de zichtbaarheid van de klassen te veranderen:
.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}
Als je je klassen een andere naam hebt gegeven, zorg er dan voor dat je .popup-overlay en .popup-content vervangt door de namen van je klassen.
Nu, we willen niet dat de pop-up voor altijd verborgen blijft, dus moeten we een speciale use-case in de CSS maken voor wanneer de pop-up getoond moet worden. We gaan jQuery gebruiken om te bepalen wanneer de pop-up zichtbaar moet zijn.
JQuery heeft de mogelijkheid om classes toe te voegen en te verwijderen op basis van acties (zoals klikken). Dus, als we de jQuery programmeren om een klasse genaamd “active” toe te voegen wanneer op de “open” knop wordt geklikt, kunnen we de “active” klasse in CSS gebruiken om de pop-up te tonen. Voeg de “active” class toe aan de pop-up classes en maak een nieuwe styling voor wanneer de pop-up zichtbaar is.
Zie het voorbeeld hieronder om te zien hoe deze CSS styling eruit moet zien:
.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}
Modal jQuery
Nu is het tijd om de jQuery toe te voegen. Zorg ervoor dat u uw HTML-document voor jQuery instelt voordat u jQuery-code toevoegt. Als u niet zeker weet hoe u dit moet doen, raadpleegt u ons artikel HTML gereedmaken voor jQuery.
Dus wanneer op de HTML-knoppen “Openen” en “Sluiten” wordt geklikt, moet jQuery de klasse “actief” toevoegen of verwijderen.
Dit eerste statement voegt de klasse “active” toe wanneer op de knop “Open” wordt geklikt.
$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});
Wanneer dit gebeurt, wordt de klasse “active” toegevoegd aan de pop-upklassen, waardoor de zichtbaarheid van de pop-up wordt gewijzigd in “visible”. Met andere woorden, de pop-up verschijnt.
Dit tweede statement verwijdert de “active” klasse wanneer op de “Close” knop wordt geklikt.
$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});
Wanneer dit gebeurt, wordt de “active” klasse verwijderd van de pop-up klassen, waardoor ze terugkeren naar hun vorige styling waarbij de zichtbaarheid is ingesteld op hidden.
Voeg beide statements van jQuery toe aan je document. Als dit alles correct is ingevuld, heb je een rudimentaire modale pop-up box.
jQuery is een open-source software die is toegestaan onder een MIT licentie. jQuery is geen product van Pair Networks, Inc, en Pair Networks geeft geen garantie voor jQuery. Houd er rekening mee dat er vele niveaus van javascript bibliotheken beschikbaar zijn. Raadpleeg uw IT professional voor advies en begeleiding over een geschikte bibliotheek. Dit specifieke product kan al dan niet aan uw behoeften voldoen. Pair Networks, Inc. biedt ondersteuning voor deze handleiding voor uw gemak en is niet verantwoordelijk voor de prestaties van jQuery. Lees aandachtig de voorwaarden en de omvang van de diensten voor elke online dienst of product dat u overweegt te kopen of te gebruiken.