Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Eksempler

Er du sikker på, du vil forlade siden?

Denne dialog advarer brugeren, før de forlader en side, hvor de har foretaget ændringer, der kan gå tabt.

Vis HTML for eksempel på advarsel før man forlader siden
<div class="fds-modal" id="example-leave-page" aria-hidden="true"
    role="dialog" aria-modal="true" aria-labelledby="modal-id-1-title"
    data-modal-forced-action>
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="example-leave-page-heading">
                Er du sikker på, du vil forlade siden?
            </h2>

        </div>
        <div class="modal-body">
            <p>Du er ved at forlade formularen. Ændringer, der ikke er
                gemt, vil gå tabt.</p>
        </div>

        <div class="modal-footer">
            <button class="button button-primary" data-modal-close>Bliv på
                siden</button><button class="button button-secondary"
                data-modal-close>Forlad siden</button>
        </div>

    </div>
</div>

<button class="button button-tertiary" data-module="modal"
    data-target="example-leave-page">
    Åbn modal
</button>

Anvendes til

Dialogen anvendes, når brugeren er ved at forlade en side, hvor de har foretaget ændringer, der ikke er gemt. Således hjælper dialogen til at undgå, at data går tabt uønsket. Det kan fx være, hvis de er ved at logge af, eller hvis de klikker på en anden side i navigationen.

Anvendes ikke til

Denne dialog skal ikke anvendes, når der ikke er konsekvenser for brugeren ved at forlade siden.

Vejledning

  • Til dette mønster anvendes komponenten Modalvindue, som kræver handling.
  • Brug altid teksten til at gøre opmærksom på, at ændringer vil gå tabt.
  • Hvis brugeren vælger at lukke vinduet helt, er det ikke muligt at vise denne dialog. Tilføj i stedet en browseradvarsel om, at data kan gå tabt, hvis brugeren forlader siden.

Ved log af

Vis HTML for eksempel på advarsel ved log af
<div class="fds-modal" id="example-log-off" aria-hidden="true"
    role="dialog" aria-modal="true" aria-labelledby="modal-id-1-title"
    data-modal-forced-action>
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="example-log-off-heading">
                Er du sikker på, du vil logge af?
            </h2>

        </div>
        <div class="modal-body">
            <p>Du er ved at logge af selvbetjeningen. Ændringer, der ikke
                er gemt, vil gå tabt.</p>
        </div>

        <div class="modal-footer">
            <button class="button button-primary" data-modal-close>Forbliv
                logget på</button><button class="button button-secondary"
                data-modal-close>Log af</button>
        </div>

    </div>
</div>

<button class="button button-tertiary" data-module="modal"
    data-target="example-log-off">
    Åbn modal
</button>