DSO Toolkit homepage

Dialog

Component preview opent in nieuw tabblad

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