Playground

Interactive playground — toggle ModalTarget behavior, modal props, and the action you call, then run it live.

Playground

Tweak any option, hit Run, and see the result in real time. The two code panes show exactly what your action call and <ModalTarget> setup look like with the current configuration.

Modal props

titlelevel

Open options

instantEnter— skip enter animation

ModalTarget behavior

enableInteractOutsideAllow interacting with content behind the modal.disableCloseOnInteractOutsideClicking outside no longer requests close.disableCloseOnInteractOverlayClicking the overlay specifically does not close.disableLockBodyScrollBody scroll is not locked while the modal is open.disableCloseOnEscapeEsc key no longer closes the modal.

Action call

openModal(DemoDialog, {
  group: 'demo',
  props: {"title":"Hello from playground","level":1}
})
  .then((data) => { /* confirmed */ })
  .catch(() => { /* closed */ })

Target setup

<ModalTarget group="demo" >
  <ModalOverlay class="vm-demo-overlay" />
</ModalTarget>

What you can change

Action — openModal, replaceModal, or the useModal controller.
Modal props — title and level passed to the demo dialog.
Open options — instantEnter to skip the enter animation.
ModalTarget behavior — every toggle from ModalBehaviorOptions: enableInteractOutside, disableCloseOnInteractOutside, disableCloseOnInteractOverlay, disableLockBodyScroll, disableCloseOnEscape.

The promise resolves when the user confirms (rendered in the demo dialog) and rejects when the modal closes — both outcomes show up in the Last result indicator.

Edit this pageorReport an issue

Introduction

What @kolirt/vue-modal is and the problems it solves.