Standaard modal
Een modal bestaat uit een header, body en footer. De footer en de body zijn optioneel.
Toegankelijkheid
Een modal heeft standaard een aantal potentiële toegankelijkheidsissues. Hier een aantal aanwijzigingen
-
Een modal is voor blinde mensen niet altijd even duidelijk. Neem daarom een extra toelichting
op. Geef die een
class="screenreader-only"zodat die alleen door screenreaders gezien wordt. - Geef de toelichting een id die terugkomt in de
aria-describedbyvan de modal. Dan wordt de toelichting meteen voorgelezen als de modal geopend wordt. -
Geef de
modal__bodyeentabindex="0".
De tabindex zorgt er voor dat de tekst met toetsenbord bereikbaar is, wat noodzakelijk is om lange teksten met scrollbars met toetsenbord zichtbaar te kunnen maken. -
Geef de section een
role="document".
De role zorgt er voor dat de tekst van de modal voorgelezen wordt en er makkelijk in genavigeerd kan worden.
NB: De escape knop annuleert en sluit het venster.
Het titel element kan ook weggelaten worden, maar het is toch raadzaam die te behouden omdat de titel kernachtig het doel aan de gebruiker duidelijk kan maken.
Dit is de beschrijving van de modal. Het wordt door de screenreader voorgelezen als de modal geopend wordt.
Het is gekoppeld aan de modal div via de aria-describedby.
Zet hierin de toelichting die blinden duidelijk maakt wat er getoond wordt en hoe het werkt.
Vermeldt in ieder geval dat met de escape knop geannuleerd kan worden en het venster sluit.
Titel van modal
Ut quis congue sapien. Proin maximus augue molestie mauris ultrices, non consequat lectus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit massa est, nec sodales ex sollicitudin eget.
modal met backdrop
De backdrop zorgt ervoor dat de focus op de modal komt te liggen. De gebruiker wordt niet afgeleid door informatie achter de modal.
Subsidie zij-instroom verantwoorden
Ut quis congue sapien. Proin maximus augue molestie mauris ultrices, non consequat lectus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit massa est, nec sodales ex sollicitudin eget.
Javascript
Open een modal door op de knop te klikken
Toegankelijkheids tip: De tekst van de modal body is zo lang, dat er scrollbars komen.
De scrollbar zijn niet automatisch met het toetsenbord te bereiken.
Zorg er in dat geval voor dat de div een tabindex = "0" krijgt,
zodat het focus kan krijgen en de tekst met de cursortoetsen te verplaatsen is.
Titel van modal
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.
Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.
Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
<script>
var myModal;
// Load modal component
System.import('/uno/components/modal/modal.js').then(function (module) {
myModal = new module.Modal(document.getElementById('myModal'));
});
// Called when the user clicks the button
function openModal() {
myModal.open();
}
</script>Hoogte en breedte
Om de afmetingen van een modal aan te passen kunnen er een aantal modifiers worden toegepast op de HTML klasse.
Extra grote modal
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
Grote modal
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
Kleine modal
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
Hoogte instellen: Door het toevoegen van de volgende klasses kan de hoogte van de modal worden ingesteld.
class="modal--height-xl" // Een modal die het hele scherm vultclass="modal--height-l" // Een modal die 75% van het scherm vultclass="modal--height-s" // Een modal die 40% van het scherm vultBreedte instellen: Door het toevoegen van de volgende klasses kan de breedte van de modal worden ingesteld.
class="modal--width-xl" // Een modal die het hele scherm vultclass="modal--width-l" // Een modal die 75% van het scherm vultclass="modal--width-s" // Een modal die 40% van het scherm vultBenodigde stylesheets
/uno/components/modal/modal.css/uno/components/button/button.css