Modals onderbreken de flow van de gebruiker en vragen om actie. Ze zijn geschikt wanneer de gebruiker zijn aandacht moet richten op belangrijke informatie. Bijvoorbeeld een modal met een waarschuwing om te voorkomen dat gebruikers per ongeluk een destructieve actie uitvoeren zonder dat ze het resultaat begrijpen.
De class .dso-scripted-height
verwijdert op .dso-body
in de large viewport de max-height
-property.
Modals zijn zeer storend en blokkeren de flow totdat de gebruiker ze verwijdert. Gebruik een modal alleen als de informatie een directe relatie heeft met de huidige taak.
Gebruik een modal alleen voor simpele interacties. Vermijd modals voor complexe interacties of besluitvorming waar aanvullende informatie nodig is die niet in de modal staat. Plaats dus geen lange formulieren of βcheck-outβ stappen in een modal.
Algemeen
aria-label
of aria-labelledby
geeft de modal een toegankelijke naam.aria-describedby
verwijst naar de inhoud waarin het doel van de modal wordt beschreven. Daarvoor moet er vaste tekst aanwezig zijn die het doel beschrijft.Dialog vs Alertdialog
Is een modal bedoeld om gebruikers te onderbreken met dringende informatie, details of acties? Gebruik dan de role="alertdialog"
. In andere gevallen gebruik je role="dialog"
.
In tegenstelling tot gewone meldingen moet er tenminste één interactief element in een alertdialog staan. Zet de focus daarop als de modal verschijnt. Meestal is dit een actie om te bevestigen, sluiten of annuleren. Er kunnen ook andere interactieve elementen in een alertdialog staan, zoals invoervelden, checkboxen en radio selecties. Waar de focus gezet moet worden is afhankelijk van het doel van de modal.
<!-- When modal is open add .dso-modal-open to body -->
<body class="dso-modal-open">
<!-- Modal markup. Can be placed anywhere inside <body> -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-no-close">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="modal-no-close">Activiteit toevoegen</h2>
<button type="button" class="dso-close" aria-label="Sluiten"></button>
</div>
<div class="dso-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="dso-footer">
<button type="button" class="dso-tertiary"><span>Annuleren</span></button>
<button type="submit" class="dso-primary"><span>Toevoegen</span></button>
</div>
</div>
</div>
<dso-banner status="danger">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="dso-rich-content">
<h2>
Storingsmelding:
</h2>
<p>Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.</p>
</div>
<button type="button" class="dso-tertiary"><span class="sr-only">Sluiten storingsmelding</span>
<dso-icon icon="times"></dso-icon>
</button>
</div>
</div>
</div>
</dso-banner>
<div class="container">
<!-- Page content -->
<form>
<fieldset>
<legend>Contact</legend>
<div class="form-group dso-input dso-input-text dso-required">
<div class="dso-label-container">
<label for="form-vertical-voornaam" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-voornaam" class="form-control" required>
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-vertical-achternaam" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-achternaam" class="form-control">
<p class="dso-help-block" id="helpTextId_form-vertical-achternaam">Mag ook de familienaam zijn</p>
</div>
</div>
<div class="form-group dso-static">
<div class="dso-label-container">
<span class="control-label">Geslacht</span>
</div>
<div class="dso-field-container">
Man
</div>
</div>
<div class="form-group dso-input dso-input-text has-feedback">
<div class="dso-label-container">
<label for="form-vertical-geboortedatum" class="control-label">
Geboortedatum
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-geboortedatum" class="form-control">
<span class="form-control-feedback" aria-hidden="true">
<dso-icon icon="calendar"></dso-icon>
</span>
</div>
</div>
<div class="form-group dso-input dso-input-email dso-required">
<div class="dso-label-container">
<label for="form-vertical-email" class="control-label">
E-mailadres
</label>
</div>
<div class="dso-field-container">
<input type="email" id="form-vertical-email" class="form-control" required>
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-vertical-password" class="control-label">
Wachtwoord
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-password" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-vertical-password_bevestig" class="control-label">
Wachtwoord (bevestig)
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-password_bevestig" class="form-control">
</div>
</div>
<div class="form-group dso-confirm">
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="form-vertical-nieuwsbrief" name="nieuwsbrief">
<label for="form-vertical-nieuwsbrief">
Stuur mij de maandelijkse nieuwsbrief
</label>
</div>
<p class="dso-help-block" id="helpTextId_form-vertical-nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>Bijlagen</legend>
<fieldset class="form-group dso-files">
<legend class="sr-only"></legend>
<div class="dso-label-container">
<label for="form-vertical-documenten" class="control-label" aria-hidden="true">
</label>
</div>
<div class="dso-field-container">
<ul class="dso-filelist">
<li>
<div class="dso-filename" id="form-vertical-documenten-file-filename-0">
Schetsen_en_foto's_1.pdf
</div>
<div class="dso-selectable dso-confidential">
<input type="checkbox" id="form-vertical-documenten-input-confirm-0" name="form-vertical-documenten-input-confirm-0" aria-describedby="form-vertical-documenten-file-filename-0">
<label for="form-vertical-documenten-input-confirm-0">
Vertrouwelijk
</label>
</div>
<button type="button" aria-describedby="form-vertical-documenten-file-filename-0" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
</li>
<li>
<div class="dso-filename" id="form-vertical-documenten-file-filename-1">
Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
</div>
<div class="dso-selectable dso-confidential">
<input type="checkbox" id="form-vertical-documenten-input-confirm-1" name="form-vertical-documenten-input-confirm-1" aria-describedby="form-vertical-documenten-file-filename-1" checked>
<label for="form-vertical-documenten-input-confirm-1">
Vertrouwelijk
</label>
</div>
<dso-icon icon="status-warning"></dso-icon>
<button type="button" aria-describedby="form-vertical-documenten-file-filename-1" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
</li>
</ul>
<dso-alert status="warning">
<div class="dso-rich-content">
<p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
<ol>
<li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
<li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
</ol>
<p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
</div>
</dso-alert>
<!-- To use an input type="file" element -->
<div class="dso-file-upload">
<input type="file" id="form-vertical-documenten-file-upload" />
<label class="dso-secondary" for="form-vertical-documenten-file-upload">
<dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
</label>
</div>
</div>
<!-- Or to trigger the upload using a button element (not recommended) -->
<!--
<button type="button"
class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>
-->
</fieldset>
</fieldset>
<fieldset>
<legend>Beleg</legend>
<div class="form-group dso-select dso-multiple">
<div class="dso-label-container">
<label for="form-vertical-beleg" class="control-label">
Beleg
</label>
</div>
<div class="dso-field-container">
<select id="form-vertical-beleg" class="form-control" multiple>
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>Auto merk</legend>
<div class="form-group dso-select">
<div class="dso-label-container">
<label for="form-vertical-auto_merk" class="control-label">
Type auto
</label>
</div>
<div class="dso-field-container">
<select id="form-vertical-auto_merk" class="form-control">
<optgroup label="Europees">
<option value="alfa">Alfa Romeo</option>
<option value="fiat">Fiat</option>
<option value="mercedes" selected>Mercedes</option>
<option value="volkswagen">Volkswagen</option>
</optgroup>
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>Filter op type</legend>
<div class="form-group dso-filter">
<div class="dso-label-container">
<label for="form-vertical-filter_type" class="control-label">
Type
</label>
</div>
<div class="dso-field-container">
<div class="dso-search-bar">
<div class="dso-search-bar-input">
<span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="form-vertical-filter_type" placeholder="Bv. GTI" />
<button type="button">
Zoekopdracht legen
</button>
</div>
<button type="button" class="dso-secondary sr-only">
Button
</button>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Aanhanger</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Welke aanhanger</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Welke aanhanger
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-0" name="aanhanger" value="bak">
<label for="form-vertical-aanhanger-0">
Bak
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-1" name="aanhanger" value="caravan" checked>
<label for="form-vertical-aanhanger-1">
Caravan
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-2" name="aanhanger" value="fietsendrager">
<label for="form-vertical-aanhanger-2">
Fietsendrager
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-3" name="aanhanger" value="oplegger">
<label for="form-vertical-aanhanger-3">
Oplegger
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Maak een keuze</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Maak een keuze
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="form-vertical-input-checkbox-0" name="input-checkbox" value="1">
<label for="form-vertical-input-checkbox-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="form-vertical-input-checkbox-1" name="input-checkbox" value="2">
<label for="form-vertical-input-checkbox-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="form-vertical-input-checkbox-2" name="input-checkbox" value="3">
<label for="form-vertical-input-checkbox-2">
drie
</label>
</div>
</div>
</fieldset>
<div class="form-group dso-input-number">
<div class="dso-label-container">
<label for="form-vertical-input-number-voorbeeld" class="control-label">
Aantal
</label>
</div>
<div class="dso-field-container">
<div class="dso-input-number">
<button type="button" class="dso-tertiary"><span class="sr-only"></span>
<dso-icon icon="minus-square"></dso-icon>
</button>
<input type="number" id="form-vertical-input-number-voorbeeld" readonly tabindex="-1" class="dso-input-step-counter" value="0">
<button type="button" class="dso-tertiary"><span class="sr-only"></span>
<dso-icon icon="plus-square"></dso-icon>
</button>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vraag</legend>
<div class="form-group dso-textarea">
<div class="dso-label-container">
<label for="form-vertical-gekke_vraag" class="control-label">
Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?
</label>
</div>
<div class="dso-field-container">
<textarea class="form-control" id="form-vertical-gekke_vraag" rows="5"></textarea>
<p class="dso-help-block" id="helpTextId_form-vertical-gekke_vraag">Deze vraag heeft een toelichting</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vraag met infobutton</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?
</span>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij vraag</span>
</button>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-0" name="input-radio-infobutton" value="1" checked>
<label for="form-vertical-input-radio-infobutton-0">
ja, de vraagstelling aan duidelijkheid te wensen over, ik wil graag een toelichting hierop
</label>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij antwoord</span>
</button>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-1" name="input-radio-infobutton" value="2">
<label for="form-vertical-input-radio-infobutton-1">
nee, het is mij duidelijk
</label>
</div>
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Vraag met toelichting uitgeklapt</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Toelichting op uw vraag</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Toelichting op uw vraag
</span>
<button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
<span class="sr-only">Toelichting op uw vraag</span>
</button>
<div class="dso-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Toelichting bij vraag: "Toelichting op uw vraag"</h4>
<p>Bij verticale formulieren wordt het bij checkboxen en radio's onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
</div>
</div>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-open-0" name="input-radio-infobutton-open" value="1" checked>
<label for="form-vertical-input-radio-infobutton-open-0">
ja
</label>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij antwoord</span>
</button>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-open-1" name="input-radio-infobutton-open" value="2">
<label for="form-vertical-input-radio-infobutton-open-1">
nee
</label>
</div>
</div>
</fieldset>
</fieldset>
<div class="dso-form-buttons">
<button type="button" class="dso-tertiary"><span>Annuleren</span></button>
<button type="submit" class="dso-primary"><span>Verstuur</span></button>
</div>
</form>
</div>
<script type="module" src="../../@dso-toolkit/core/dso-toolkit/dso-toolkit.esm.js"></script>
<script nomodule src="../../@dso-toolkit/core/dso-toolkit/dso-toolkit.js"></script>
</body>
<!-- When modal is open add .dso-modal-open to body -->
<body {{ className('dso-modal-open', [noMaxHeight, 'dso-scripted-height']) }}>
<!-- Modal markup. Can be placed anywhere inside <body> -->
{% render '@dialog', {body: body, dialog: dialog} %}
{% render '@banner' %}
<div class="container">
<!-- Page content -->
{% render '@form' %}
</div>
<script type="module" src="{{ '/@dso-toolkit/core/dso-toolkit/dso-toolkit.esm.js' | path }}"></script>
<script nomodule src="{{ '/@dso-toolkit/core/dso-toolkit/dso-toolkit.js' | path }}"></script>
</body>
__title: Default
body: >-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
dialog:
id: modal-no-close
heading: Activiteit toevoegen
buttons:
- name: cancelButton
type: button
modifier: dso-tertiary
label: Annuleren
- name: confirmButton
type: submit
modifier: dso-primary
label: Toevoegen