Kop 1

tagline

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.
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. Wordt het modale venster geopend, dan haalt het de DOM-node weer uit die variabele en stopt het in het modale venster.

Leerdoelen

  • absoluut positioneren
  • centreren met CSS Grid;
  • cards is CSS
  • DOM bewerkingen:
    • elementen maken;
    • elementen een class geven
    • elementen toevoegen;
    • elementen verwijderen;
  • herhaling animatie in CSS

Modaal venster 0: het resultaat (00:02:39)

Hier is een hele tutorialreeks gemaakt om te laten zien hoe je een eigen modaal venster maakt.
Je ziet dat de inhoud die in de modale vensters getoond moet worden, uit de DOM gehaald wordt. Deze stat al in de mark-u, maar het javaScript slaat dat op een een variabele. Als er op een knop geklikt wordt, moet d passende inhoud tevoorschijn komen.
Je ziet dat proces gebeuren als je de pagina inspecteert.

In het modale venster is ook een sluitknop die het modaal sluit. Dat gebeurt ook als je op de achtergond van het modaal klikt.
Daarnaast ben je in de gelegenheid om zelf animaties toe te voegen.

Modaal venster 1: de inhouden in een variabele (00:09:37)

De inhoud, die in het modale venster moet komen is al in de markup aanwezig.
Om deze met JavaScript te kunnen verwijderen en op te roepen, wordt deze in een variabele gestopt. Daarvoor krijgen ze in de HTML allemaal dezelfde class-naam.
Met .querySelectorAll(); kun je dan al die element uit de DOM selecteren en aan een variabele toekennen. Deze lijkt op een array, maar is dat niet helemaal. Het is een nodeList. Je kunt er wel elk element daaruit oproepen.

Modaal venster 2: de inhouden verwijderen (00:05:13)

Je kunt met een for-lus door de node-list lopen. De syntax lijkt erg op het doorlopen van een array.Je kunt elk element kiezen met de rechte haken zoals bij array's.
In de for-lus stop je het nodeElement in een variabele.
Om deze te verwijderen combineer je .parentNode (die de parent van het node-element selecteert) met de methode .removeChild(). Als argument geef je hetzelfde element mee.

Modaal venster 3: opmaak knoppen (00:10:26)

Nu de inhoud van de modale vensters weg is kunnen we de achtergebleven inhoud opmaken.
Deze bestaat hier bijna alleen maar uit elementen waarop geklikt moet gaan worden.
Dier krijgen allemaal dezelfde class mee om ze op te kunnen maken en te selecteren met het script. In deze tutorial noem ik ze daarom maar knoppen.
Nadat alle class-namen gekopieerd zijn, selecteer je eenvoudig alle afbeeldingen met die class en kun je ze een maximale breedte meegeven.
Met CSS-Grid kun je een raster-layout definiëren die minimaal de breedte van de kleine knopjes heeft en breder wordt, zodat de rij meer knoppen kan bevatten. we werken hier met
display: grid;
grid-template-columns
repeat() en minmax()
Om de inhoud midden in de grid-ruimte te plaatsen gebruik je justify-items: center

Modaal venster 4: inhoud toevoegen (00:04:03)

We maken hier een functie, die de inhoud in de node-variabele toevoegt aan de body.
Met .appendChild(); kun je deze aan de body toevoegen.
We maken daarvoor een functie aan, die een element als parameter meekrijgt.
Dat element is één van de elementen uit de node-list. Met de rechte haken kun je dat zelf in de console uitproberen.

Modaal venster 5: opmaak en toevoegen modaal (00:14:02)

Als we de inhoud kunnen toevoegen, dan kan dat ook in een modaal.
Deze bestaat uit een div met de class modaal-achtergrond, welke de totale viewport moet bedekken en enigszins doorzichtig is.
Daarbinnen het de modaal die straks de inhoud moet krijgen. Om eerst te kunnen opmaken voegen we het modaal hard-coded toe.
Na de CSS getest te hebben (geef het modaal een witte achtergrond en alvast wat padding, zodat deze ook zonder inhoud te zien is), halen we de mark-up weer weg.
Deze moet nu door JavaScript worden aangemaakt en in de DOM geplaatst worden.
Daarvoor maak je een variabele met het node-element aan met .createElement();
Met .classList geef je een class aan dat element;
en met .appendChild(); voeg je het aan een ander element of de DOM toe.

Al deze elementen kunnen in de functie die het element toevoegt, aan de DOM worden toegevoegd. In plaats van de gewone inhoud dus nu de inhoud in een modaal venster.

Modaal venster 6: alle knoppen in een array (00:06:53)

We kunnen net als in de tweede video alle knoppen in een node-list stoppen met .querySelectorAll(). Ze zijn dan echter nog niet in een echte array. We willen namelijk gebruik gaan maken van een echte array-method .indexOf(), en dan moet het echt een array zijn.
Maak daarvoor een lege array aan en loop met een for-lus door de node-list. Elk element daaruit voeg je dan met .push() aan de array toe.

Modaal venster 7: met een klik de juiste inhoud in het modaal (00:07:24)

Voeg aan elke knop in de lus een event-listener toe.
Deze roept de functie aan, die de modaal toevoegt. Maar in plaats van een element als parameter, geef je nu het event mee.
In de functie heeft het event de methode .target, welke het element geeft waarop geklikt wordt. Ga dat in de console na!
Omdat we een array van alle knopen hebben, kunnen we met .indexOf(); bepalen de hoeveelste knop uit de array is aangeklikt. Dit getalletje is de sleutel om het juiste element uit de nodelist van de array te halen en in het modaal te stoppen.
We zijn nu dus in staat met 1 klik het juiste element in het modaal te plaatsen en deze vervolgens in de DOM te zetten!

Modaal venster 8: de sluitknop toevoegen (00:05:02)

Voor de user moet het modaal ook weer te sluiten zijn.
We maken daarvoor de sluitknop met een class.
We kennen al .createElement() en .className, die we daarvoor gebruiken.
De inhoud kan en .innerHTML worden gemaakt. Op https://unicode-table.com/en/ kun je de unicode voor het × vinden, als inhoud van de knop.

modaal venster 9: de sluitknop activeren (00:05:37)

We maken daarvoor een functie, die het modaal weer uit de DOM haalt. Dat is weer met .removeChild(). Het element, dat de achtergrond van het modaal bevat, is al in een variabele dat dan als argument wordt meegegeven.
Met een .addEventListener(); koppel je de sluitfunctie aan de sluitknop.
Om een runtime-error te voorkomen, plaats je de event-listener na de sluit-functie.

Verdere uitwerking

  • Voeg animaties toe aan het modaal venster, zoals je dat zag in de eerste video

Modaal venster 10: de sluitknop stijlen (00:09:01)

Het blijkt allereerst dat een position absolute voor de modale achtergrond niet werkt als er voor inhoud is. Die achtergond is precies zo groot als het venster en schoolt mee naar boven.
De achtergrond moet daarom een position: fixed; krijgen.
De inhoud moet wel beschikbaar blijven voor de gebruiker, daarom een overflow: auto, zodat de inhoud gescrolled kan worden.

Modaal venster 11: het modaal animeren (00:09:54)

Het blijkt dat de padding van de knop het modale venster boven veel te fors maakt.
We verwijderen de padding en met transform: translateX() kunnen we knop wat naar rechts verplaatsen.

Omdat we het modale venster gemaakt hebben zijn we goed in staat deze te animeren.
Met een keyframe-animatie animeren we de schaalfactor met transform: scale();
Om een verende effect te krijgen schalen we eerst vanuit 0 naar een factor die te groot is: 1.2 bijvoorbeeld en vlak daarna weer iets te klein. De afwijking wordt steeds kleiner tot 1 bij 100%.
De animation is natuurlijk forwards, zodat na afloop de schaalfactor 1 blijft.

Modaal venster 12: finesse met schaduwen (00:05:55)

Zowel de afbeeldingen in de knoppen als in de modale inhoud krijgen een schaduw, zodat ze zich van de achtergrond onderscheiden.

Modaal venster 13: twee transitions (00:01:46)

Behalve de schaalfactor kun je ook een overgang in de box-shadow meegeven.
Bij de hodverstaus vergroot en verplaats je de schaduw.
In de transition herhaal je de waarden in de transition en zet je tussen de twee waarden een komma.

Modaal venster 14: modale inhoud met CSS verbergen (00:02:44)

Als je goed kijkt zie je dat de content zich toch met een flits in de pagina toont. Voordat het script gaat werken wordt al een deel van de inhoud opgebouwd, voordat deze door het script wordt verwijderd.
Daarom willen we dat bij voorbaat doen. We moeten ons realiseren dat de inhoud in eerste instantie binnen de wrapper zit en het modaal later met dezelfde inhoud buiten het modaal.
Daarom selecteren we de inhoud met .wrapper .modaalInhoud zodat die in de modaal zonder hinder getoond blijft worden.


Bonusopdrachten

  • Maak in het inlogformulier en linkje registreren en zorg ervoor dat als je daarop klikt, je het registratieformlier direct in je modaal krijgt.

Link naar een oudere versie van deze opdracht.


Inleveren

  • Na afloop plaats je deze training online in je bewijzenmap;
  • Valideer jouw pagina's op Markup Validation Service van W3C.
  • De validatie icoontjes staan al in de footer. Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
  • Plaats jouw code op in een aparte reposetry op GitHub en plaats jouw uitwerking online;
  • Maak in jouw GitHub-repo een README.md met daarin temnminste een link naar jouw online uitwerking.
  • Plaats de GitHub-link in ELO Magister bij de FRO-opdracht modaal venster