Modal Wrapper

Typical tag name: sk-modal

Exported class: SKModal

Inheritance: SKModal <-- SKUIBase <-- (imm-dom stack)

Wraps anything with a default slot and provides title and close button labels via attributes.

This is intended to be the content of #showModal using imm-dom - not a trigger for the modal itself.

Required Assets

External Requirements

WC Dependencies

API

Attributes

Attribute Default Enumerators Usage
icon fas fa-circle-info N/A Icon used in modal header.
modal-title null N/A Modal title text.
close-btn-text Close N/A Close button (in footer) text.

Properties

Property Type Default Usage
(None.)

Events

Event Detail Usage
(None.)

Methods

Method Arguments Usage
(None.)

Slots

Slot Usage
default Place custom input here.

CSS Parts

Part Usage
(None.)

Example

<link rel="stylesheet" type="text/css" href="/css/sk-root.css">
<script type=module src='/cdn/@encipher-sk/ivcore/esm/doc_create.js'></script>

<div class='example'>
  <ivc-i18n></ivc-i18n>
  <ivc-zs reload-ws></ivc-zs>
  <button id='example-trigger'>Open Modal</button>
  <script>
  import { imm_tag, imm_dialog } from '/cdn/npm/imm-dom/esm/index.min.mjs';
  const $trigger = document.querySelector( '#example-trigger' );
  const $modalContent = imm_tag( 'sk-modal', { 'modal-title': 'Hello!' }, imm_tag( 'p', 'World!' ) );
  $trigger.addEventListener( 'click', e => { imm_dialog.showModal( document.body, $modalContent ) } );
  </script>
</div>