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 () null
closeModal () 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>