OverlayModal

A dialog on the native dialog element (showModal, closedby, requestClose, returnValue), with a script fallback for browsers that lack it. The open state can live in the URL.

import { OverlayModal } from '@zairakai/vue-components/Overlay'

Usage

<OverlayModal />

Example

A native dialog

It uses the dialog element: Escape and a click outside close it.

<script setup>
  import { ref } from 'vue'

  const open = ref(false)
</script>

<template>
  <button
    type="button"
    @click="open = true"
  >
    Open the dialog
  </button>
  <OverlayModal
    v-model="open"
    title="A native dialog"
    closedby="any"
  >
    It uses the dialog element: Escape and a click outside close it.
    <template #footer>
      <button
        type="button"
        @click="open = false"
      >
        Close
      </button>
    </template>
  </OverlayModal>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	boolean	undefined	Whether the dialog is open. Use it with v-model, it works without too.
queryParam	string		Keep the open state in this query parameter of the URL (?dialog=1).
title	string
modal	boolean	true	A modal blocks the page behind it; a non-modal dialog does not.
closedby	string	'closerequest'	How it can be dismissed: "any" (Escape and a click outside), "closerequest" (Escape), "none" (only the code).
alert	boolean	false	An alert dialog interrupts the user and expects an answer.
closeButton	boolean	true
closeLabel	string	'Close'

Events

Name	Description
update:modelValue
open
close
cancel

Slots

Name	Description
header
close
default
footer

See Theming for the class hooks and the data-* state of the components.