Modal En heldekkende modal med backdrop for å fremheve en handling brukeren må gjøre.

Struktur

<lk-modal>
  <div>
    <div>
      <h2>
      <button/>
    </div>
    <div>
      <slot/>
    </div>
  </div>
</lk-modal>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
modal-title string "" Tekst for <h2>
is-open boolean false

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni <div class="modal__box__content">

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
toggleModal (event) null
openModal () null
closeModal () null

Eksempler

Åpne modalen

Dette er innholdet i modalen. Her kan du legge alt du ønsker av HTML og innhold. 

<script>
  function openModal() {
    document.getElementById('my-modal').openModal();
  }
</script>

<lk-button onclick="openModal()">
  Åpne modalen
</lk-button>

<lk-modal modal-title="Dette er en modal" is-open="false" id="my-modal">
  <p>
    Dette er innholdet i modalen. Her kan du legge alt du ønsker av HTML og innhold.
  </p>
</lk-modal>
Åpne modalen 
<script>
    function openModalSec() {
      document.getElementById('my-modal-sec').openModal();
    }
  </script>
  
  <lk-button onclick="openModalSec()">
    Åpne modalen
  </lk-button>
  
  <lk-modal modal-title="Dette er en modal" is-open="false" id="my-modal-sec">
    <div style="height: 150vh;"></div>
  </lk-modal>