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.

Vi tilbyr også en hjelpeklasse for å formatere opptil 3 knapper i modalen. Wrap knappene i en <span> med klassen pkt-modal__btn--wrapper for å få riktig oppsett.

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" >
  <div class="pkt-modal__header">
    <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>
    <div class="pkt-modal__container">
      <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="save-button"
                type="submit"
                class="pkt-btn pkt-btn--primary"
                >

                Lagre
            </button>
            <button
                id="cancel-modal"
                type="button"
                class="pkt-btn pkt-btn--tertiary pkt-btn--label-only"
                >
                Avbryt
            </button>
          </span>
        </form>
      </div>
    </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>


<PktModal
  ref="modalRef"
  heading-text="Ønsker du å lagre dine siste endringer?"
  :close-on-backdrop-click="true"
  size="large"
  @submit="onSubmit"
>
  Du har lagt til endringer i distribusjonsreglene. Ønsker du å lagre dem?
</PktModal>

<
<script setup>
import {ref} from 'vue'
import {PktModal} from '@/components/modal/Modal.vue'

const modalRef = ref(null)

</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 className="pkt-modal__btn--wrapper">

      <PktButton
        type="button"
        skin="secondary"
        onClick={() => dialogRef.current?.close()}
      >
        Avbryt
      </PktButton>

      <PktButton type="submit" skin="primary" onClick={() => onSubmit()}>
        Lagre
      </PktButton>
    </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.

Props

Props	Type	Default	Obligatorisk	Beskrivelse
className	string	-	-	Styling klasse
closeOnBackdropClick	boolean	`false`	-	Hvis `true`: Lukk modal ved klikk på bakgrunn.
headingText	string		-	Tittelen til modalen. Anbefales å alltid ha en tittel for tilgjengelighetens skyld.
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
removePadding	boolean	`false`	-	Fjerner padding på modalen. NB! Brukes på eget ansvar ved egendefinert innhold.

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