sw-ui-modal

Lightweight modal wrapper built on the native <dialog> element with a built-in bounce-in / bounce-out animation.

1
<sw-ui-modal id="dialog">
2
  <h2>Hello</h2>
3
  <p>I'm a modal.</p>
4
</sw-ui-modal>

Toggle visibility via the boolean open property. Opening calls dialog.showModal() (so focus is trapped, the body is inert, and the native ::backdrop is rendered); closing animates out before calling dialog.close() so the host can be removed cleanly.

The element fires a cancelable sw-modal-close event on ESC or backdrop click — call event.preventDefault() from a parent to veto the close (e.g. when there are unsaved changes in the dialog body).

Class: SwUiModal · Module: packages/web-components/src/components/UI/layout/sw-ui-modal.ts

class: SwUiModal, sw-ui-modal

Fields

Attributes

CSS Properties

Slots

Events