Responsive Modal Window

Tweet

Op 7 may vroeg ik het volgeden op Twitter:

Iemand een goed artikel/ voorbeeld/ oplossing van een modal window in een responsive design, wanneer bekeken op mobile? Kris

Aanleiding

Ik ben bezig met het omzetten van een design naar HTML/ Css. Deel van de opdracht is ook om de website op verschillende platformen goed te laten werken. Nu was hier in het design nog maar weinig van uitgewerkt.

Het design omvat ook een modal window (of een lightbox). Maar hoe ga ik hier mee om op een klein scherm, waar ruimte schaars is?

De oplossing

Een goed artikel hierover vond ik op de website van Brad Frost, Conditonal Lightbox.

Op een klein scherm hebben modal windows geen nut, het is beter om te linken naar een nieuwe pagina/ de afbeelding. Je gebruikt dan het hele scherm om de nieuwe content te tonen.

Een modal window script welke van dit concept gebruik maakt is Magnific Popup.

Als je gebruik wilt maken van een modal window, waar je naar de vorige en de volgende afbeelding kan navigeren, moet dit op mobiel anders worden opgevangen.

Published on