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:

Reacties  

#8 Sjef Koppens 06-12-2017 17:41
Mindert is het mogelijk om meerdere foto's op één pagina te maken, zodat je een soort gallery krijgt
Citeer
#7 Tiger Master 30-09-2017 23:36
Deze Modal lijkt op een tooltip idee, ipv muis over is het een klik-module simpel gezegd.

maar hoe kun je zo een modal maken met een
verplichte veld die je moet invullen om door te gaan zoals een check-box?

gewoon een HTML code met check box code of zit dat anders in elkaar?
Citeer
#6 Joop 30-09-2017 21:49
Maar er moet wel eerst op de knop worden geklikt, anders gaat het nog niet goed. Er is dus toch iets anders aan de hand.....
Citeer
#5 Joop 30-09-2017 21:43
Opgelost!
Als je de foto niet de relatieven url geeft, maar de volledige, gaat het wel goed.
Hoe dat komt weet ik niet.
Citeer
#4 Joop 30-09-2017 21:24
Als ik de aanwijzingen in Modals in Joomla volg, gaat dit prima met een foto, die in het "modal" getoond wordt. De link via de button daartoe laat keurig het modal met de foto zien. Echter ALLE links op de pagina werken dan niet meer!
Waar gaat dat fout?
Citeer
#3 Boudewijn Timmers 30-09-2017 16:20
was net bezig met onze nieuwe website, en wilde een contactformulie r op die manier koppelen aan een knop. Dus jouw post kwam weer op een fantastisch moment Mindert! En het werkt prima. Merk wel dat bij browsers die de pagina eerder hebben bezocht, een refresh bv met F5 nodig is om het te laten werken.
Citeer
#2 Egbert Pepping 29-09-2017 19:41
weer een leuke uitleg ga het uitproberen
Citeer
#1 Rene 29-09-2017 15:31
Hoi Mindert

Leuke en praktische tuttorial!
Toevallig ben ik net aan het stoeien met modals.
Dat het zonder javascript kon wist ik niet. Heel handig om te weten.


Groeten rene
Citeer

Plaats reactie

Beveiligingscode
Vernieuwen