Modals maken met HTML en CSS

Modals zijn een soort van popups waarin je belangrijke content kunt tonen. Een modal verschijnt wanneer een bezoeker van je website op een link of een knop klikt waaraan je een modal hebt gekoppeld.

Gebruikers actie benodigd

Zoals hierboven al genoemd kun je belangrijke content in een modal plaatsen. Wanneer een modal op je website opent, dan kan een bezoeker niets anders meer doen.

Om verder te kunnen op je website moet de bezoeker eerst de tekst in je modal lezen of de activiteit uitvoeren die in de modal staat. Dit laatste is het geval wanneer je bijvoorbeeld een login formulier of een inschrijf formulier plaatst in een modal.

Pas na afronding van de taak in de modal of na het afsluiten van de modal (zonder het afronden van de taak) kan de bezoeker weer verder rondbladeren op je website.

Een modal vereist dus een activiteit van de bezoeker.

Wanneer gebruik je modals?

Gebruik modals alleen wanneer de inhoud van de modal echt belangrijk is. Als je voor heel veel zaken op je website modals gebruikt, dan verlang je dus steeds een actie van je bezoeker voordat hij of zij weer verder kan. Dit kan vervelend zijn als je het teveel toepast.

Je zou modals kunnen gebruiken voor belangrijke meldingen op je website, of je zou modals kunnen gebruiken voor taken die belangrijk zijn en die afgerond moeten worden.

Een voorbeeld van zo'n belangrijke taak kan zijn dat je bezoekers zijn of haar gegevens moet invullen om bijvoorbeeld iets af te rekenen of te kunnen downloaden.

Ook voor login schermen zou je goed een modal kunnen gebruiken.

Hoe maak je modals?

Modals zijn niet zo moeilijk te maken. En het aardige is, je kunt ze maken zonder gebruik te maken van javascript. Dus, alleen met HTML en CSS kun je modals maken.

In de onderstaande video zie je hoe je met HTML en CSS een modal maakt:

Download de ZIP met de modal demo (rechtsklik en kies voor "doel opslaan als")

Modals in Joomla

Ook in Joomla kun je modals maken met de HTML en CSS code die je in de bovenstaande video zag.

Wanneer je in Joomla gebruik maakt van een template met Bootstrap 3 (of hoger) dan kan het nog gemakkelijker. Hoe, dat laat ik je zien in de onderstaande video:

Modals in Wordpress

Wat voor Joomla geldt, geldt ook voor Wordpress. Ook in Wordpress kun je modals maken. En als je thema Bootstrap 3 of hoger ondersteunt, dan kun je nog wat gemakkelijker modals maken.

Hoe je modals maakt in Wordpress, ontdek je in de onderstaande video:

You have no rights to post comments