Kop 1

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

• centreren met CSS Grid;
• DOM bewerkingen:
  • elementen maken;
  • elementen toevoegen;
  • elementen verwijderen;
• herhaling animatie in CSS
• kennismaken met object in JS:
  • object maken
  • object uitlezen

Het resultaat (00:03:23)

In deze reeks maken we een modaal venster. Door een klik op een element wordt de vierport bedekt met een transparante laag en is er in het centrum een vlak waarin een ander element wordt getoond.
Het modaal venster kan worden gesloten met een sluitknop of door een klik op de transparante achtergrondlaag.
De inhoud van het modaal venster wordt bepaald door het element waarop geklikt wordt.

De inspector laat zien dat veel van de elementen in de mark-up bij de opstart van het document verdwijnen en bij ieder afzonderlijk weer opduiken binnen het modaal venster dat onder aan de body wordt toegevoegd.

Modaal venster 2: het modaal venster opmaken (00:06:41)

In de CSS wordt het modaal venster opgemaakt.
De doorzichtige achtergrond wordt gemaakt. Deze krijgt een position: fixed: .
De top- en left-waarden zijn 0, de breedte en hoogte respectievelijk 100vw en 100vh.
CSS Grid biedt een mooie mogelijkheid de inhoud op het document te centreren.
Een element dat kleiner is dat het grid, kan met justify-self: center horizontaal worden gecentreerd en met align-self:center verticaal in het parent-element welke display: grid heeft.

Modaal venster 3: JS vingeroefeningen modaal venster (00:08:29)

In deze JavaScript vingeroefeningen zien we hoe met JavaScript het het modaal venster kan worden verwijderd en hoe deze kan worden toegevoegd waarbij er een element met een id kan worden ingevoegd.
In JS kun je als een element in een variabele is gestopt, deze verwijderen door de parent van dit element te selecteren en daarin vervolgens met .removeChild() methode te verwijderen. Als argument moet dan het element zelf weer worden opgegeven. Dus: element.parentNode.removeChild(element);
Het toevoegen van een element kan als het in een variabele zit met .appendChild().

Modaal venster 4: modaal verwijderen (00:05:48)

Het modaal venster moet kunnen worden gesloten met een klik op de achtergrond of met een klik op de sluitknop. Er wordt eerst een functie geschreven die het modale venster verwijderd. Het statement is al in het vorige filmpje geschreven.
Deze functie wordt met een event-listener opgeroepen bij een klik op de sluitknop en een event-listener voor de achtergrond.
Hoewel het venster zoals gewenst sluit, sluit deze ook als op de inhoud van het modale venster geklikt wordt. Dit is weer niet gewenst.
Daarom moet bij het modaalVenster toegevoegd worden dat een klik niet wordt doorgegeven aan een of ander ouder-element. Dit kan met e.stopPropagation() waarbij e het event van de klik is.
Dit heeft direct het gevolg dat de foutmelding verdwenen is bij een klik op de sluitknop. Deze klik werkte namelijk 2 keer: een keer door het modaal te verwijderen, daarna opnieuw, maar het modaal was al weg en kon daarom niet meer worden gevonden.

Modaal venster 5: JavaScript object (00:04:16)

Er moet een manier gevonden worden om bij een klik uit de href de waarde op te pakken en daarmee het element met de corresponderende id te selecteren. We gaan dit doen met een JS-object. Hier proberen we dat uit in de console van de browser.
We gaan aan een nog leeg object key’s met key-waarden toevoegen en weer opvragen.
Een object maak je aan met:

let naamObj = new Object();
  een key met waarde voeg je dan toe met:
  naam[‘key’] = ‘waarde’

naamObj = {‘key1’: ‘waarde1’,
  ‘key2’: ‘waarde2’,
  ‘key3’: ‘waarde3’ }

Modaal venster 6: object maken en vullen (00:06:14)

Het object moet met een for-lus worden gevuld.
We maken eerst een array met de trigger-linkjes.
Als we deze dan met een for-lus doorlopen, en tracen met console.log(), dan krijgen we eerst de linkjes.
Als we vervolgens daarvan de hash nemen krijgen we het gewenste item voorzien van een #, die we niet nodig hebben.
We moeten dan met .substr(1) dat eerste teken verwijderen.
Dan kan het als key-waarde dienen en gebruiken worden om het element uit de DOM te selecteren als waarde.
Met tracing controleren we of het object ook klopt.

Modaal venster 7: modaal-inhouden verwijderen (00:03:58)

Het object uit de vorige video kan direct ingezet worden.
Het concept van een modaal venster is immers dat de inhoud, die in het modaal venster verschijnt in de broncode al aanwezig is. Al die elementen moeten allereerst in variabelen gestopt worden, dat is in dit geval het object en uit de DOM worden verwijderd.
Met een for-in lus doorlopen we dan het object en verwijderen met de methode uit filmpje 3 alle betreffende elementen.

Modaal venster 8: klik-event aan de triggerende links toevoegen (00:03:41)

Er is al een lus die door de triggerende elementen loopt.
Aan elk element wordt een klik-event toegevoegd. Eerst moet verhinderd worden dat de standaardactie wordt uitgevoerd. Omdat de href een interne link is met de #, zal dat uitgevoerd worden. Je voorkomt dit met e.preventDefault(); waarbij e het event is.
Vervolgens voeg je uit het object de waarde bij de key die je al hebt, toe aan modaalInhoud en voeg je het modale venster toe aan de body.

Modaal venster 9: bij sluiten modaal inhoud legen (00:01:16)

Er blijkt nog een kleine bug is het modale venster te zitten. Als het venster gesloten is en een nieuwe link geklikt wordt, wordt het venster geopende met de oude én de nieuwe inhoud. Bij de sluit-functie op een opdracht worden toegevoegd: modaalInhoud moet worden geleegd: met .innerHTML = “”; wordt het een lege string. en is het probleem verholpen.

Verdere uitwerking

• Voeg animaties toe aan het modaal venster, zoals je dat zag in de eerste video
• Voeg nog een inlogvenster toe als prototype. Er hoeft dus geen back-end aan gekoppeld te zijn.

Bonusopdracht

In deze uitwerking was het modaal-venster al compleet met sluitknop aan de DOM toegevoegd.
Het is eruitgehaald door het script en in een variabele gestopt.
Een ander werkwijze zou kunnen zijn dat het niet in de DOM zet, maar met een JS-functie helemaal gemaakt wordt. Daarbij maak je onder andere gebruik van doecument.createElement();.
Kun jij dat ook??
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