`modal` element

A dialog over the page, opened by a button.

Renders

a native <dialog> with a close button

Required

An id, so a button can open it.

Native apps

Web, and server-driven native apps

Syntax

modal element

{ "type": "modal" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`elements`	`array of element`

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Events & actions

Opened by action: "open"/"toggle" with target: "<id>"; closed by its close button, Escape, or a button with action: "close".

Example

modal example

{
  "type": "column",
  "elements": [
    { "type": "button", "label": "Size guide", "action": "open", "target": "size-guide" },
    {
      "id": "size-guide",
      "type": "modal",
      "elements": [
        { "type": "text", "variant": "h3", "content": "Size guide" },
        { "type": "text", "content": "Floor lamps are 150–190 cm tall." },
        { "type": "button", "label": "Got it", "action": "close" }
      ]
    }
  ]
}

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-column i03783cbf">
    <button class="iwc-button ie54b392b iwc-button-primary" type="button" data-iwc-action="open" data-target="size-guide">
      Size guide
    </button>
    <dialog class="iwc-modal i513b2732" id="size-guide">
      <button type="button" class="iwc-dialog-close" data-iwc-action="close-dialog" aria-label="Close">
        ×
      </button>
      <h3 class="iwc-text i397388c7 iwc-text-h3">
        Size guide
      </h3>
      <p class="iwc-text id1891564">
        Floor lamps are 150–190 cm tall.
      </p>
      <button class="iwc-button i074a6181 iwc-button-primary" type="button" data-iwc-action="close">
        Got it
      </button>
    </dialog>
  </div>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.