Modaal venster

met JavaScript

Modaal venster

Een modaal venster laat na een gebeurtenis extra inhoud zien kan weer worden gesloten. Je kunt hem gebruiken voor: log-in of registratievensters en natuurlijk als lightbox bij een foto-gallerij.

Leerdoelen

modaal venster met JS 1: (00:06:39)

Een modaal venster is een venster dat opspringt, en een aparte inhoud weergeeft. In onze uitwerking is deze inhoud in eerste instantie al in de DOM aanwezig. Maar het JS stopt deze inhoud in een variabele en haalt die inhoud dan uit de DOM. Dit gebeurt in een apart script dat hier init.js genoemd wordt.
Dit kan door van het element het parent te kiezen en daarvan het child en daarmee zichzelf te verwijderen: inhoud.parent.removeChild(inhoud);

modaal venster met JS 2: de grijze achtergrond (00:06:10)

Bij veel modale vensters wordt de pagina met een transparante laag bedekt.
Dit element wordt door het het javaScript gemaakt en geplaatst. Met CSS krijgt het zijn positie, grootte en transparantie.

modaal venster met JS 3: de method maken en aanroepen (00:06:49)

Voor ons modaal venster maken we naast het init-script een specifiek script voor een modaal venster.
We maken daar een functie, die zichzelf aanroept.
Deze functie maakt een object met een method. Een method is eigenlijk een functie binnen een object.
Vanuit het init.js kunnen we de method aanroepen met de punt-notatie.
in dit voorbeeld geven we het element met de grijze achtergrond een class mee als we op een knop drukken.

modaal venster met JS 4: de method sluiten maken en aanroepen (00:09:03)

Om het grijze vlak weer te sluiten maken we een method sluiten aan.
Visueel is het al klaar als de class-naam verwijderd wordt.
Deze eenvoudige method kan op zijn beurt weer via een eventListener gekoppeld worden aan een klik op diezelfde grijze achtergrond.
Ook moet de inhoud worden toegevoegd.
Daarvoor worden in de functie modaal elementen modaal-venster en modaal-inhoud gemaakt. De method modaal.open() krijgt een parameter. Als deze wordt aangeroepen krijgt deze de inhoud als argument mee,

modaal venster met JS 5: sluit-method verder uitwerken (00:04:09)

Het grijze vlak verdwijnt nu wel, maar de inhoud blijft nog achter.
De method moet verder worden uitgewerkt: de inhoud blijft achter omdat het element er nog is.
Voor de modaal-inhoud en de modaal-venster kan met .innerHTML de inhoud worden leeggemaakt.
Vervolgens kan de .removeChild() de variabele die modaal-venster bevat verwijderd worden.

modaal venster met JS 6: het modaal venster stijlen (00:02:24)

Het modaal venster krijgt een eigen achtergrondkleur en padding.

modaal venster met JS 7: stopPropagation (00:02:25)

Het blijkt dat venster niet alleen sluit als je op de achtergrond klikt, maar ook als je op het venster zelf klikt.
De klik op het venster zelf zou geen effect hebben, maar dan wordt er gekeken of het parent-element eventueel een klik-event heeft: een bubbling-event. Dit kun je met .stopPropagation() voorkomen.

modaal venster met JS 8: centreren (00:06:49)

Het centreren gaat met JavaScript.
Daarvoor schrijven we een nieuwe method, die met modaal.centreren() kan worden aangeroepen.
De method maakt een variabele aan die het verschil krijgt tussen de breedte van de achtergrond en die van het venster. Dat verschil wordt gehalveerd.
Mocht het venster te groot zijn dan wordt met Math.max() voorkomen dat de uitkomst negatief wordt.
Voor de hoogte wordt zo ook een variabele gemaakt.
Deze waarden worden via .style (met toevoeging van de eenheid ‘px’ aan het venster toegevoegd.
Als de method zo werkt, kan hij ook worden aangeroepen met een eventListener voor het geval het venster in grootte wordt aangepast: window.addEventListener(‘resize’, modaal.centreren);

modaal venster met JS 9: animatie (00:05:15)

Met CSS kan er een animatie worden toegevoegd. Om het centreren niet te verstoren, wordt er met transform gewerkt. De eigenschap is hier scale3d().
Voor web-kit browsers moet transform nog van een prefix worden voorzien. Met @keyframes kun je de animatie naar je hand zetten.

modaal venster met JS 10: de sluitknop (00:06:01)

De sluitknop is nu goed toe te voegen.
Eerst wordt het element met inhoud en class gemaakt.
In de open-method wordt deze aan het modaal venster toegevoegd.
Na deze toevoeging kan de knop een event-listener krijgen, die modaal.sluiten() aanroept.
Door in de CSS een absolute positie te geven kan hij in de rechterbovenhoek van het venster worden geplaatst. Het teken is wat klein, dus de font-size kan omhoog.
Een roll-over is vanzelfsprekend gewenst.

Inleveren