Wat is het verschil tussen een overlay en een modal?
Een overlay is de doorzichtige laag zelf; een modal is het venster dat daarop verschijnt. Bij een modal hoort dus een overlay, maar andersom geldt dat niet.
Een overlay op een foto heeft niets met vensters te maken.
Dat is waar de verwarring vandaan komt.
De overlay
Een gekleurde laag met doorzichtigheid. Die kan over een foto liggen, over een sectie of over je hele pagina.
Meer daarover lees je bij wat een overlay is.
De modal
Een venster dat je pagina blokkeert tot je een keuze maakt. De donkere laag eronder is de overlay.
Meer daarover lees je bij modal.
Waarom die laag erbij hoort
Hij maakt zichtbaar dat de pagina eronder even niet aan de beurt is. Zonder die laag lijkt het venster te zweven.
Meer daarover lees je bij accessibility.
Mijn vuistregels
- Overlay bij een modal: veertig tot zestig procent zwart.
- Overlay op een foto: dertig tot vijftig procent.
- Klikken op de laag sluit het venster.
- De pagina eronder scrollt niet mee.
Die derde verwacht bijna iedereen, dus laat hem werken.
In de code
Ze heten vaak allebei overlay, ook binnen dezelfde bibliotheek. Kijk dus naar wat het doet, niet naar hoe het heet.
Meer daarover lees je bij css.
Wat ze delen
Allebei liggen ze boven je inhoud. Alleen bij een modal moet je ook aan toetsenbordbediening denken.
Meer daarover lees je bij hero.