Soms is het wenselijk de flow van de gebruiker te onderbreken, omdat een applicatie bv. gegevens moet inladen. Voor die gevallen is het wenselijk een progress indicator in een modal op te kunnen nemen. De modal moet daartoe op een non-interactieve manier kunnen worden ingezet.
aria-label
, aria-labelledby
, aria-describedby
Modal Progress role: alert
Is de modal bedoeld om de gebruiker erop te wijzen dat een actie even gaat duren, dan is een role="alert"
op zijn plaats.
Voor de overige toepassingen van de modal: Modal Dialog.
<!-- 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="alert">
<div class="dso-dialog" role="document">
<div class="dso-body">
<div class="dso-progress-indicator dso-small dso-block" role="progressbar" aria-labelledby="prg-in-dialog">
<div class="dso-progress-indicator-spinner"></div><span id="prg-in-dialog" class="dso-progress-indicator-label">Resultaten laden. Een moment geduld.</span>
</div>
</div>
</div>
</div>
<section class="dso-banner alert-danger" role="alert">
<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><svg class="di di-times">
<use href="../../dso-icons.svg#times" />
</svg>
</button>
</div>
</div>
</div>
</section>
<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="voornaam" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="voornaam" class="form-control" required>
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="achternaam" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="achternaam" class="form-control" aria-describedby="helpTextId_achternaam">
<p class="dso-help-block" id="helpTextId_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>
</fieldset>
</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') }}>
<!-- Modal markup. Can be placed anywhere inside <body> -->
{% render '@dialog', {body: body, dialog: dialog, progress: progress} %}
<section class="dso-banner alert-danger" role="alert">
<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>{% render '@icon-css', {icon: 'times'} %}
</button>
</div>
</div>
</div>
</section>
<div class="container">
<!-- Page content -->
{% render '@form', {fieldsets: fieldsets} %}
</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: Modal with progress indicator
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.
fieldsets:
- legend: Contact
groups:
- id: voornaam
inputType: input
type: text
label: Voornaam
required: true
- id: achternaam
inputType: input
type: text
label: Achternaam
helpText: Mag ook de familienaam zijn
- inputType: static
label: Geslacht
value: Man
dialog: false
progress:
label: Resultaten laden. Een moment geduld.