Modal dialogs II: browseronafhankelijk
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 JavaScript zijn functies beschikbaar waarmee je een modal dialog op je scherm kunt laten zien. In de tijd dat
dit verhaal werd geschreven was de ondersteuning niet erg breed. Als je het in je eigen site nodig had, moest je dus op
zoek naar een alternatief. Gebruikers van jQuery en/of
Bootstrap hadden en hebben het gemakkelijk: die platforms hebben daar
voorzieningen voor aan boord. Voor de "gewone" HTML-bouwers wordt hier een browser-onafhankelijk script gepresenteerd.
De code van het voorbeeld staat onderaan de bladzijde. Je kunt hem ook downloaden om zelf te gebruiken.
Door op onderstaande knop te klikken zie je een voorbeeld.
(Het modal dialog is nog niet getoond)
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- Het probleem met modal dialogs is dat het hele webdocument moet worden bevroren en dat de gebruiker alleen iets kan doen met het modal dialog. Het is niet handig om de hele browser te bevriezen, want dan kan de gebruiker niets meer met andere open documenten. Het huidige document (waarin de modal dialog verschijnt) mag ook niet worden bevroren, want dan werkt de modal dialog niet meer.
- Dit is opgelost door eerst het document af te dekken en daarop het modal dialog te stapelen. Het modal dialog bestaat
dus uit twee delen:
- Een half-doorzichtig element dat het hele document afdekt (de "tussenlaag").
- De eigenlijke dialog.
- De tussenlaag heeft in het voorbeeld het id="MCover". De z-index moet groter zijn dan de grootste z-index van het af te dekken document. in het voorbeeld is gebruikt: z-index:100.
- De tussenlaag heeft een neutraal-grijze kleur (#888) en is doorschijnend gemaakt met opacity:0.5.
Het is mogelijk om opacity:0 te gebruiken, maar dan ziet de gebruiker niet dat het document even is afgeschermd. - De dialog heeft id="MDialog" en ligt boven op de tussenlaag. Dat is bereikt met z-index, die groter
moet zijn dan de z-index van de tussenlaag. In het voorbeeld is 110 gebruikt.
- De code van het modal dialog staat helemaal binnen de <div id="MDialog". Zowel MCover als
MDialog zijn bij het laden van de pagina verborgen. Door dat er 'iets' gebeurt op de pagina (een trigger, hier
is dat de knop Voorbeeld van een modal dialog) wordt de JavaScript function ToonModalDialog() aangeroepen. Deze
maakt eerst MCover zichtbaar, berekent daarna de positie van het modal dialog zodat het netjes gecentreerd op het scherm
komt en maakt vervolgens MDialog ook zichtbaar.
Merk op dat de breedte in de CSS (= 490px) moet overeenstemmen met de 490 in berekening van left in ToonModalDialog()
- Als je in het modal dialog op "OK" klikt, wordt de function verwerkFormulier() uitgevoerd. Die haalt de inhoud van invul-velden op. Die worden in het document gezet. De invulvelden worden leeggemaakt.
- Om de communicatie tussen het formulier en de web-pagina makkelijker te maken hebben de invulvelden een id, geen name.
- Als je op "Annuleren" klikt worden de beide invulvelden leeggemaakt en wordt in het document gemeld dat het invullen is geannuleerd.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
#MForm {
background-color:#ffffd8;
border:1px solid black;
position:absolute;
width:490px;
height:275px;
z-index:110; }
#MCover {
background-color:#888;
opacity:0.5;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:100; }
</style>
<script>
function VerwerkFormulier() {
document.getElementById('FormulierInfo').innerHTML="";
var naam = document.getElementById('fNaam').value;
if (naam == "") naam = "(Niet ingevuld)";
var wpl = document.getElementById('fWpl').value;
if (wpl == "") wpl = "(Niet ingevuld)";
resetFormulier();
var xx = "<b>In de modal dialog ingevoerde gegevens:</b><br>
Naam: " + naam + "<br>Woonplaats: " + wpl;
document.getElementById('FormulierInfo').innerHTML = xx;
document.getElementById('MForm').style.display = "none";
document.getElementById('MCover').style.display = "none";
}
function geAnnuleerd() {
var xx = "<b>In de modal dialog ingevoerde gegevens:</b><br>
*** Het invullen is geannuleerd ***<br> ";
document.getElementById('FormulierInfo').innerHTML = xx;
resetFormulier();
document.getElementById('MForm').style.display = "none";
document.getElementById('MCover').style.display = "none";
}
function ToonModalDialog() {
document.getElementById('MCover').style.display = "block";
var cc = document.getElementById('MForm').style;
cc.left = (parseInt(window.innerWidth) - 490) / 2 + "px";
cc.display = "block";
}
function resetFormulier() {
document.getElementById('fNaam').value = "";
document.getElementById('fWpl').value = "";
}
</script>
(Zet dit in de <BODY>, op de plaats waar de knop 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 in je document waar het modal dialog moet verschijnen).
<div id="MCover" style="display:none"></div>
<div id="MForm" style="display:none"><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>
</div>
(Zet dit in de <BODY>, op de plaats in je document waar de gegevens uit het modal dialog moeten verschijnen).
<div id="FormulierInfo">
<b>In de modal dialog ingevoerde gegevens:</b><br>
(Het modal dialog is nog niet getoond)<br>
</div> <!-- Bevat de respons van de modal dialog -->
Downloaden:
Druk op de knop:
File: voorb421.zip, 1376 bytes.
Opmerking:
In het item Modal dialogs III: HTML en CSS wordt een moderne versie voor
het maken van modal dialogs beschreven.
