Modal | Punkt | Origo - Oslo kommune

Om komponenten

Dialogen er bygd opp av et <dialog> element, med en PktModal komponent som tar inn alle props som <dialog> elementet tar inn. For å åpne modalen, må du kalle de tilhørende funksjonene showModal() for å åpne modalen, og close() for å lukke den. Dette gjør du ved å koble på referansen til dialogen, og kalle funksjonene direkte. Sjekk ut eksemplene under for hvordan det gjøres.

Bruk av komponenten

Modalen kan brukes på to måter:

Med et <dialog> element og method="dialog"
Med komponenten PktModal.

Dersom du bruker knapper av typen submit, må du wrappe den med en <form method="dialog"> .... </form> tag.

React og Vue

Ved bruk i React og Vue, må man passe på at refen til dialogen er av typen HTMLDialogElement. På denne måten kan man kalle funksjonene PktModal tilbyr close() og showModal() direkte på ref.current. Se eksemplene under for hvordan dette gjøres.

Web

Ved bruk i ren HTML og CSS, kan man bruke id til å koble til modalen og lukke den med en onclick-funksjon: document.getElementById('pkt-modal').close(). Vi tilbyr en hjelpeklasse pkt-modal--open som settes på body når modalen er åpen. Dette gjør at man hindrer scroll på innholdet bak modalen når den er åpen. Denne må legges på samtidig som man trigger showModal() og fjernes når modalen lukkes med close(). Sjekk eksemplene under for hvordan dette gjøres.

Kode eksempler

<dialog id="pkt-modal" class="pkt-modal pkt-modal--medium">
    <h1 id="pkt-modal__headingText" class="pkt-modal__headingText pkt-txt-24">
        Du har lagt til endringer i distribusjonsreglene. Ønsker du å lagre dem?
    </h1>
    <div class="pkt-modal__closeButton">
        <button
            id="close-modal"
            class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
            aria-label="close">
            <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
        </button>
    </div>
    <div id="pkt-modal__content" class="pkt-modal__content pkt-txt-18-light">

        <!-- Bruker du knapper av typen 'submit', er det viktig å wrappe den med en form-->
        <form method="dialog">
            Du har lagt til endringer i distribusjonsreglene. Ønsker du å lagre dem?
            <span class="pkt-modal__btn--wrapper">
                <button
                    id="cancel-modal"
                    type="button"
                    class="pkt-btn pkt-btn--tertiary pkt-btn--label-only"
                    >
                    Avbryt
                </button>
                <span class="pkt-modal__btn--right-side">
                    <button type="button" class="pkt-btn pkt-btn--secondary">
                        Knapp
                    </button>
                    <button
                        id="save-button"
                        type="submit"
                        class="pkt-btn pkt-btn--primary"
                        >

                        Lagre
                    </button>
                </span>
            </span>
        </form>
    </div>
</dialog>
<script>
  document.getElementById('close-modal').addEventListener('click', function() {
      const modal = document.getElementById('pkt-modal');
      if (modal instanceof HTMLDialogElement) {
          modal.close();
          document.body.classList.remove('pkt-modal--open');
      }
  });

  document.getElementById('cancel-modal').addEventListener('click', function() {
      const modal = document.getElementById('pkt-modal');
      if (modal instanceof HTMLDialogElement) {
          modal.close();
          document.body.classList.remove('pkt-modal--open');
      }
  });

  document.getElementById('save-button').addEventListener('click', function() {
      const modal = document.getElementById('pkt-modal');
      if (modal instanceof HTMLDialogElement) {
          modal.close();
          document.body.classList.remove('pkt-modal--open');
      }
  });
</script>

const dialogRef = useRef<HTMLDialogElement>(null)

<PktModal
  headingText="Ønsker du å lagre dine siste endringer?"
    closeOnBackdropClick
    size="large"
    ref={dialogRef}
  >
    <form>
      Du har lagt til endringer i distribusjonsreglene. Ønsker du å lagre dem?
      <span class="pkt-modal__btn--wrapper">
        <span class="pkt-modal__btn--right-side">
          <PktButton
            type="button"
            skin="secondary"
            @click="dialogRef.current?.close()"
          >
            Avbryt
          </PktButton>

          <PktButton type="submit" skin="primary" @click="onSubmit()">
            Lagre
          </PktButton>
        </span>
      </span>
    </form>
  </PktModal>

const dialogRef = useRef<HTMLDialogElement>(null)

 <PktModal
    headingText="Ønsker du å lagre dine siste endringer?"
    closeOnBackdropClick
    size="large"
    ref={dialogRef}
  >
    <form>
      Du har lagt til endringer i distribusjonsreglene. Ønsker du å lagre dem?
      <span className="pkt-modal__btn--wrapper">
        <span className="pkt-modal__btn--right-side">
          <PktButton
            type="button"
            skin="secondary"
            onClick={() => dialogRef.current?.close()}
          >
            Avbryt
          </PktButton>

          <PktButton type="submit" skin="primary" onClick={() => onSubmit()}>
            Lagre
          </PktButton>
        </span>
      </span>
    </form>
  </PktModal>

Størrelser

Modalen tilbys i tre ulike størrelser: small, medium og large.

small tilsvarer 450px i bredde.
medium tilsvarer 550px i bredde.
large tilsvarer 650px i bredde.

Hjelpeklasser for modalinnhold

Vi tilbyr hjelpeklasser for å formatere opptil 3 knapper i modalen. Her er det viktig å bruke et slikt format for å sikre at knappene får riktig stil og oppsett. Knappene vil legge seg under hverandre i mindre skjermer.

<span class="pkt-modal__btn--wrapper">
  <button
    onclick="{
      const modal = document.getElementById('pkt-modal');
      if (modal instanceof HTMLDialogElement) {
          modal.close();
          document.body.classList.remove('pkt-modal--open');
      }
    }"
    type="button"
    class="pkt-btn pkt-btn--tertiary pkt-btn--label-only"
  >
    Avbryt
  </button>
  <span class="pkt-modal__btn--right-side">
    <button type="button" class="pkt-btn pkt-btn--secondary">
      Knapp
    </button>
    <button type="submit" class="pkt-btn pkt-btn--primary">
      Lagre
    </button>
  </span>
</span>

<span className="pkt-modal__btn--wrapper">
  <PktButton type="button" skin="tertiary" @click="dialogRef.current?.close()">
    Avbryt
  </PktButton>
  <span className="pkt-modal__btn--right-side">
    <PktButton type="button" skin="secondary" @click="onButtonClick()">
      Knapp
    </PktButton>
    <PktButton type="submit" skin="primary" @click="onSubmit()">
      Lagre
    </PktButton>
  </span>
</span>

<span className="pkt-modal__btn--wrapper">
  <PktButton
    type="button"
    skin="tertiary"
    onClick={() => dialogRef.current?.close()}
  >
    Avbryt
  </PktButton>
  <span className="pkt-modal__btn--right-side">
    <PktButton type="button" skin="secondary" onClick={() => onButtonClick()}>
      Knapp
    </PktButton>
    <PktButton type="submit" skin="primary" onClick={() => onSubmit()}>
      Lagre
    </PktButton>
  </span>
</span>

Props

Props	Type	Default	Obligatorisk	Beskrivelse
className	string	-	-	Styling klasse
closeOnBackdropClick	boolean	`false`	-	Hvis `true`: Lukk modal ved klikk på bakgrunn.
headingText	string		Ja	Tittelen til modalen.
hideCloseButton	boolean	`false`	-	Gjem ‘Lukk’-knapp i høyre hjørne. NB! Hvis denne gjemmes anbefales det å tilby en annen måte å la brukeren lukke modalen.
size	`small`, `medium`, `large`	`medium`	-	Breddestørrelse på modalen

Events

Disse metodene kan nåes ved å sette en ref av typen HTMLDialogElement på komponenten PktModal

Events	Type	Beskrivelse
showModal()	HTMLDialogElement	Åpner modalen
close()	HTMLDialogElement	Lukker modalen