Modal

Component preview opent in nieuw tabblad

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.

Technische opmerkingen

De class .dso-scripted-height verwijdert op .dso-body in de large viewport de max-height-property.

Wanneer te gebruiken

  • Onderbreken: Gebruik een modal om informatie op te vragen of weer te geven die nodig is om verder te gaan met een door de gebruiker gestart proces.
  • Informeren: Gebruik een modal om de gebruiker te informeren, bijvoorbeeld over belangrijke waarschuwingen, een systeemfout of gevolg van een gebruikersactie.
  • Bevestigen: Gebruik een modal om een beslissing van de gebruiker af te dwingen, bijvoorbeeld met de tekst β€œWeet u het zeker?””. Beschrijf duidelijk welke actie wordt bevestigd. Leg ook de mogelijke gevolgen uit.

Wanneer niet te gebruiken

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.

Hoe te gebruiken

  • Houd de titel eenvoudig, zodat de gebruiker direct begrijpt wat er van hem wordt gevraagd door de titel te lezen.
  • Zorg voor korte en bondige teksten in de modal.
  • Button labels moeten de gebruiker duidelijk vertellen wat er gebeurt als ze erop klikken.
  • Gebruik geen modal bovenop een ander modal. Als de flow een tweede modal vereist is die vaak te complex om in een modal te plaatsen.

Gedrag en toegankelijkheid

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.
  • Wanneer een modal verschijnt, moet de focus verplaatst worden naar de modal. Als er interactieve elementen in de modal staan, wordt de focus op het eerste element gezet.
  • De tab focus moet beperkt zijn tot de modal (keyboard trap).
  • Een modal kan gesloten worden door op de sluitknop te klikken. Ook kan een modal gesloten worden door op de ESC-toets te drukken of door buiten de modal te klikken.
  • Wanneer de modal wordt gesloten, moet de focus, indien mogelijk, teruggezet worden naar de positie die hij had voordat de modal werd geopend.
  • Valideer eventuele invoer van een gebruiker voordat de modal wordt gesloten. Als een validatiefout optreed, moet de modal open blijven en wordt er een alert en/of inline foutmelding gegeven bij het betreffende invoerveld.

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.

Bronvermelding

<!-- 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="btn btn-link"><span>Annuleren</span></button>

                <button type="submit" class="btn btn-primary"><span>Toevoegen</span></button>

            </div>
        </div>
    </div>

    <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">
                    <div class="dso-description dso-rich-content">
                        Geef een tekening van de nieuwe situatie in 1:100. Een situatietekening geeft een schets van de bestaande en de nieuwe situatie met daarop duidelijk de maatvoering en de schaalaanduiding (1:100).
                    </div>
                    <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&#39;s_1.pdf
                                </div>
                                <div class="dso-confidential dso-selectable">
                                    <input type="checkbox" id="form-vertical-documenten-input-confirm-0" name="" value="" 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="btn btn-link 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-confidential dso-selectable">
                                    <input type="checkbox" id="form-vertical-documenten-input-confirm-1" name="" value="" checked aria-describedby="form-vertical-documenten-file-filename-1" />
                                    <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="btn btn-link 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="btn btn-default" 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="btn btn-link"><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="btn btn-default 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="btn btn-link"><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="btn btn-link"><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 infobutton 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>

                    <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" [DEPRECATED]</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>

                </fieldset>

            </fieldset>

            <div class="dso-form-buttons">

                <button type="button" class="btn btn-link"><span>Annuleren</span></button>

                <button type="submit" class="btn btn-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} %}

  <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: link
      label: Annuleren
    - name: confirmButton
      type: submit
      modifier: primary
      label: Toevoegen