There are no notes for this item.
<!-- Default -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-dialog">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="modal-dialog">Modal dialoog</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<div class="dso-body">
<p>Inhoud</p>
</div>
<div class="dso-footer">
<button type="button" class="dso-primary"><span>OK</span></button>
</div>
</div>
</div>
<!-- Valid -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-dialog-valid-example">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="modal-dialog-valid-example">Uitloggen</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<div class="dso-body">
<p>Weet u zeker dat u wilt uitloggen? Opgeslagen gegevens zijn terug te vinden in Mijn Omgevingsloket</p>
</div>
<div class="dso-footer">
<button type="button" class="dso-primary"><span>Ja</span></button>
<button type="button" class="dso-tertiary"><span>Nee</span></button>
</div>
</div>
</div>
<!-- Invalid -->
<!-- DO NOT USE MARKUP BELOW IN PRODUCTION -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-dialog-invalid-example">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="modal-dialog-invalid-example">Activiteit toevoegen</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<div class="dso-body">
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Alle activiteiten</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Alle activiteiten
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="alle-activiteiten-0" name="alle-activiteiten" value="bouwactiviteit-vergunning">
<label for="alle-activiteiten-0">
Bouwactiviteit - Vergunning
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="alle-activiteiten-1" name="alle-activiteiten" value="brug-aanleggen-delfland-vergunning">
<label for="alle-activiteiten-1">
Brug aanleggen Delfland - Vergunning
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="alle-activiteiten-2" name="alle-activiteiten" value="sloopactiviteiten-informatie-overig">
<label for="alle-activiteiten-2">
Sloopactiviteiten - Informatie overig
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="alle-activiteiten-3" name="alle-activiteiten" value="sloopactiviteiten-melding">
<label for="alle-activiteiten-3">
Sloopactiviteiten - Melding
</label>
</div>
</div>
</fieldset>
</div>
<div class="dso-footer">
<button type="button" class="dso-primary"><span>Toevoegen</span></button>
<button type="button" class="dso-tertiary"><span>Annuleren</span></button>
</div>
</div>
</div>
<!-- Closable -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-close">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="modal-close">Modal dialoog</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<div class="dso-body">
<p>Inhoud</p>
</div>
<div class="dso-footer">
<button type="button" class="dso-primary"><span>OK</span></button>
</div>
</div>
</div>
<!-- Single submit -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-single-submit">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="modal-single-submit">Modal dialoog</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<div class="dso-body">
<p>Inhoud</p>
</div>
<div class="dso-footer">
<button type="submit" class="dso-primary"><span>Indienen</span></button>
</div>
</div>
</div>
<!-- Steps -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-steps">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="modal-steps">Modal dialoog</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<div class="dso-body">
<p>Inhoud</p>
</div>
<div class="dso-footer">
<button type="button" class="dso-tertiary"><span>Annuleren</span></button>
<button type="button" class="dso-secondary"><span>Vorige</span></button>
<button type="button" class="dso-secondary"><span>Volgende</span></button>
</div>
</div>
</div>
<!-- Default -->
<div {{ className('dso-modal', [dialog.confirm, 'dso-confirm']) }} tabindex="-1"
{{ attributes(
[dialog, 'role', 'dialog'],
[progress, 'role', 'alert'],
[dialog, 'aria-labelledby', dialog.id]
) }}
>
<div class="dso-dialog" role="document">
{% if dialog %}
<div class="dso-header">
<h2 id="{{ dialog.id }}">{{ dialog.heading }}</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
{% endif %}
<div class="dso-body">
{% if dialog %}
<p>{{ body }}</p>
{% else %}
{% render '@progress-indicator-css', { size: 'small', block: true, labelid: 'prg-in-dialog', label: progress.label } %}
{% endif %}
</div>
{% if dialog %}
<div class="dso-footer">
{% for button in dialog.buttons %}
{% render '@button', button %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
<!-- Valid -->
<div {{ className('dso-modal', [dialog.confirm, 'dso-confirm']) }} tabindex="-1"
{{ attributes(
[dialog, 'role', 'dialog'],
[progress, 'role', 'alert'],
[dialog, 'aria-labelledby', dialog.id]
) }}
>
<div class="dso-dialog" role="document">
{% if dialog %}
<div class="dso-header">
<h2 id="{{ dialog.id }}">{{ dialog.heading }}</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
{% endif %}
<div class="dso-body">
{% if dialog %}
<p>{{ body }}</p>
{% else %}
{% render '@progress-indicator-css', { size: 'small', block: true, labelid: 'prg-in-dialog', label: progress.label } %}
{% endif %}
</div>
{% if dialog %}
<div class="dso-footer">
{% for button in dialog.buttons %}
{% render '@button', button %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
<!-- Invalid -->
<!-- DO NOT USE MARKUP BELOW IN PRODUCTION -->
<div {{ className('dso-modal', [dialog.confirm, 'dso-confirm']) }} tabindex="-1" role="dialog" aria-labelledby="{{ dialog.id }}">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="{{ dialog.id }}">{{ dialog.heading }}</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<div class="dso-body">
{% render '@group-checkboxes', form %}
</div>
<div class="dso-footer">
{% for button in dialog.buttons %}
{% render '@button', button %}
{% endfor %}
</div>
</div>
</div>
<!-- Closable -->
<div {{ className('dso-modal', [dialog.confirm, 'dso-confirm']) }} tabindex="-1"
{{ attributes(
[dialog, 'role', 'dialog'],
[progress, 'role', 'alert'],
[dialog, 'aria-labelledby', dialog.id]
) }}
>
<div class="dso-dialog" role="document">
{% if dialog %}
<div class="dso-header">
<h2 id="{{ dialog.id }}">{{ dialog.heading }}</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
{% endif %}
<div class="dso-body">
{% if dialog %}
<p>{{ body }}</p>
{% else %}
{% render '@progress-indicator-css', { size: 'small', block: true, labelid: 'prg-in-dialog', label: progress.label } %}
{% endif %}
</div>
{% if dialog %}
<div class="dso-footer">
{% for button in dialog.buttons %}
{% render '@button', button %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
<!-- Single submit -->
<div {{ className('dso-modal', [dialog.confirm, 'dso-confirm']) }} tabindex="-1"
{{ attributes(
[dialog, 'role', 'dialog'],
[progress, 'role', 'alert'],
[dialog, 'aria-labelledby', dialog.id]
) }}
>
<div class="dso-dialog" role="document">
{% if dialog %}
<div class="dso-header">
<h2 id="{{ dialog.id }}">{{ dialog.heading }}</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
{% endif %}
<div class="dso-body">
{% if dialog %}
<p>{{ body }}</p>
{% else %}
{% render '@progress-indicator-css', { size: 'small', block: true, labelid: 'prg-in-dialog', label: progress.label } %}
{% endif %}
</div>
{% if dialog %}
<div class="dso-footer">
{% for button in dialog.buttons %}
{% render '@button', button %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
<!-- Steps -->
<div {{ className('dso-modal', [dialog.confirm, 'dso-confirm']) }} tabindex="-1"
{{ attributes(
[dialog, 'role', 'dialog'],
[progress, 'role', 'alert'],
[dialog, 'aria-labelledby', dialog.id]
) }}
>
<div class="dso-dialog" role="document">
{% if dialog %}
<div class="dso-header">
<h2 id="{{ dialog.id }}">{{ dialog.heading }}</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
{% endif %}
<div class="dso-body">
{% if dialog %}
<p>{{ body }}</p>
{% else %}
{% render '@progress-indicator-css', { size: 'small', block: true, labelid: 'prg-in-dialog', label: progress.label } %}
{% endif %}
</div>
{% if dialog %}
<div class="dso-footer">
{% for button in dialog.buttons %}
{% render '@button', button %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
/* Default */
body: Inhoud
dialog:
id: modal-dialog
heading: Modal dialoog
buttons:
- name: confirmButton
type: button
modifier: dso-primary
label: OK
/* Valid */
body: >-
Weet u zeker dat u wilt uitloggen? Opgeslagen gegevens zijn terug te vinden in
Mijn Omgevingsloket
dialog:
id: modal-dialog-valid-example
heading: Uitloggen
buttons:
- name: confirmButton
type: button
modifier: dso-primary
label: Ja
- name: cancelButton
type: button
modifier: dso-tertiary
label: Nee
/* Invalid */
body: Inhoud
dialog:
id: modal-dialog-invalid-example
heading: Activiteit toevoegen
buttons:
- name: confirmButton
type: button
modifier: dso-primary
label: Toevoegen
- name: cancelButton
type: button
modifier: dso-tertiary
label: Annuleren
form:
id: alle-activiteiten
inputType: checkboxes
label: Alle activiteiten
options:
- value: bouwactiviteit-vergunning
label: Bouwactiviteit - Vergunning
- value: brug-aanleggen-delfland-vergunning
label: Brug aanleggen Delfland - Vergunning
- value: sloopactiviteiten-informatie-overig
label: Sloopactiviteiten - Informatie overig
- value: sloopactiviteiten-melding
label: Sloopactiviteiten - Melding
/* Closable */
body: Inhoud
dialog:
id: modal-close
heading: Modal dialoog
buttons:
- name: confirmButton
type: button
modifier: dso-primary
label: OK
__title: Closable
/* Single submit */
body: Inhoud
dialog:
id: modal-single-submit
heading: Modal dialoog
buttons:
- name: confirmButton
type: submit
modifier: dso-primary
label: Indienen
__title: Single submit
/* Steps */
body: Inhoud
dialog:
id: modal-steps
heading: Modal dialoog
buttons:
- name: cancelButton
type: button
modifier: dso-tertiary
label: Annuleren
- name: previousButton
type: button
modifier: dso-secondary
label: Vorige
- name: nextButton
type: button
modifier: dso-secondary
label: Volgende
__title: Steps