Ben's Hobbyhoekje -- Modal dialogs III: HTML, CSS en JavaScript

Modal dialogs III: HTML, CSS en JavaScript

Een 'modal dialog' is een pop-up die de werking van een programma stil zet en net zolang wacht totdat de gebruiker een reactie heeft gegeven. Een bekend voorbeeld is de melding die je krijgt met de JavaScript opdracht window.alert():

Binnen HTML bestaat de tag <dialog>, waarmee je een dialog op je scherm kunt laten zien. Dit is niet modal, maar er zijn JavaScript-functions beschikbaar waarmee een dialog als modal wordt geopend.
Om aan te geven dat de pagina buiten het dialog niet toegankelijk is wordt daar vaak een gekleurde laag over gelegd. Daar is CSS voor nodig.

In de modal dialog ingevoerde gegevens:
(Het modal dialog is nog niet getoond)

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in eigen site.
De code van het modal dialog bestaat uit HTML en JavaScript. Voor de opmaak van het modal dialog en de gekleurde tussenlaag wordt CSS gebruikt.
De code kun je downloaden om zelf te gebruiken.
De werking van het script
Een klik op de knop "Voorbeeld van een modal dialog" start de JavaScript-function toonModalDialog(), deze naam spreekt voor zich.
Als in het dialog op de knop "Annuleren" wordt geklikt, start de JavaScript-function gaAnnuleerd(). Behalve dat het dialog wordt gesloten, worden ook de twee invoervelden leeg gemaakt en verschijnt er de melding in het document dat de actie is geannuleerd.
Als in het dialog op de knop "OK" wordt geklikt, start de JavaScript-function verwerkFormulier(). Omdat "OK" van het type submit is, wordt het formulier naar de server gestuurd. In dit geval is dat de JavaScript-function. De inhoud van de twee invoervelden wordt in het document gezet, vervolgens worden de invoervelden leeg gemaakt. Daarna wordt het dialog gesloten.
HTML
De tag <form> en de formulier-elementen worden elders op deze site besproken, dat wordt hier niet herhaald.
De tag <dialog> maakt een niet-modal dialog, dat bij het laden van de niet zichtbaar (niet open) is. Als je wilt dat dit dialog direct zichtbaar is, gebruik je <dialog open>.
De aangewezen methode om een open dialog te sluiten is via een knop, zie onder het kopje JavaScript. Op een PC of laptop kan een open dialog ook worden gesloten door op de escape toets te drukken.
Voor gemakkelijk comuniceren met JavaScript is het handig om elk dialog een id te geven. In het voorbeeld is id="dialogDemo" gebruikt.
CSS
De voor het voorbeeld relevante CSS is de pseudo-klasse backdrop. Daarmee stel je de achtergrondkleur en de doorzichtigheid van de tussenlaag in,net zoals je dat voor bijvoorbeeld een <div>-tag zou doen.
backdrop werkt alleen als de dilag wordt geopend met showModal().
backdrop werkt alleen met <dialog> en met elementen die het attribuut popover hebben.
JavaScript
<dialog> heeft drie methodes voor het openen en sluiten van dialogs:
• show() Opent een <dialog> als gewone dialog. De CSS backdrop wordt niet verwerkt.
• ShowModal() Opent een <dialog> als modal dialog. De CSS backdrop wordt verwerkt.
• close() Sluit een dialog.
In het voorbeeld wordt document.getElementById('dialogDemo').showModal() gebruikt om het dialog te tonen, en
document.getElementById('dialogDemo').close() om het dialog te sluiten.
Toepassen in je eigen site
Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Maak je eigen knop om het dialog te openen, of gebruik daarvoor een ander mechanisme, bijvoorbeeld onload="ToonModalDialog()" in de <body>-tag.
Pas JavaScript en CSS aan naar je eigen behoefte.
Tenslotte...
Als je op deze manier een modal dialog maakt, kun je de onderliggende informatie niet meer benaderen. Scrollen kan nog wel. Als het modal dialog is gemaakt vanuit een pagina in een <iframe>, kun de informatie buiten het <iframe> nog wel gewoon benaderen.
Met <dialog> is veel meer mogelijk dan op deze pagina is beschreven. Zie bijvoorbeeld het artikel <dialog>: The Dialog element op MDN Web Docs.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>)

<style>
#dialogDemo {
background-color:#ffd;
}
#dialogDemo:backdrop {
background-color:#888;
opacity:0.5;
}
</style>

<script>
function ToonModalDialog() {
document.getElementById('dialogDemo').showModal();
}
function VerwerkFormulier() {
// Stuur de gegevens naar de pagina
let naam, wpl, xx;
document.getElementById('FormulierInfo').innerHTML="";
naam = document.getElementById('fNaam').value;
if (naam == "") naam = "(Niet ingevuld)";
wpl = document.getElementById('fWpl').value;
if (wpl == "") wpl = "(Niet ingevuld)";
resetFormulier();
xx = "<b>In de modal dialog ingevoerde gegevens:</b><br>Naam: " +
naam + "<br>Woonplaats: " + wpl;
document.getElementById('FormulierInfo').innerHTML = xx;
}
function geAnnuleerd() {
const xx = "<b>In de modal dialog ingevoerde gegevens:</b><br>
*** Het invullen is geannuleerd ***<br> ";
document.getElementById('FormulierInfo').innerHTML = xx;
resetFormulier();
}
function resetFormulier() {
document.getElementById('fNaam').value = "";
document.getElementById('fWpl').value = "";
document.getElementById('dialogDemo').close();
}
</script>

(Zet dit in de <BODY>, op de plaats waar de button moet verschijnen)

<div align="center">
<button type="button" onclick="JavaScript:ToonModalDialog()"
style="font-size:14px;padding:5px 0;font-weight:bold;
color:navy;">Voorbeeld van een modal dialog</button>
</div>

(Zet dit in de <BODY>, op de plaats waar de respons
van het formulier moet verschijnen)

<div id="FormulierInfo">
<b>In de modal dialog ingevoerde gegevens:</b><br>
(Het modal dialog is nog niet getoond)<br> 
</div>

(Zet dit in de <BODY>; de plaats is niet van belang)

<dialog id="dialogDemo">
<p align="center"><img src="bbhead0k.gif" width="288"
height="30" border="0"></p>
<p align="center" class="Kop2">Voorbeeld van een Modal dialog</p>
<p align="center">Vul je naam en je woonplaats in en klik op
<b>OK</b>, of klik <b>Annuleren</b>.</p>
<div align="center"><form action="JavaScript:VerwerkFormulier()">
<table border="1" cellpadding="5" cellspacing="2"
bgcolor="#d8d8d8" frame="box" rules="rows"><tr>
<td colspan="3" align="center"><b>Geef uw naam
en woonplaats</b></td>
</tr><tr>
<td align="right"><b>Naam:</b></td><td> </td>
<td><input type="text" size="30" id="fNaam"></td>
</tr><tr>
<td align="right"><b>Woonplaats:</b></td><td> </td>
<td><input type="text" size="30" id="fWpl"></td>
</tr><tr>
<td colspan="3" align="center"><b>
<input type="submit" value=" OK "></b>  
<input type="button" value="Annuleren"
onclick="JavaScript:geAnnuleerd()">
</td>
</tr></table>
</form></div>
</dialog>

Downloaden:

Druk op de knop: File: voorb784.zip, 1240 bytes.

Opmerking:

Een oudere versie voor het maken van modal dialogs wordt beschreven in het item Modal dialogs II: browseronafhankelijk.

Geef uw naam en woonplaats
Naam:
Woonplaats: