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

lk-modal

qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit,
Navn Type Verdi
string
string
string

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 dialog elementet

Metoder

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

Metode Parameter Retur Beskrivelse
toggleModal (event) null
openModal / showModal () null
close () null

Eksempler

Åpne modalen

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

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

<lk-button onclick="showModal()">
  Å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>