Modal

Native <dialog>

A task that needs the whole screen's attention before going back — a form, a detail view, a picker. If it only needs a yes / no, use an AlertDialog; if the page should stay usable beside it, a Sheet.

Basic

Blu-ray Disc BOX

native <dialog>: focus trap, Esc, backdrop click, top layer.

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessModal, BlessText } from "blessing-ui";
const open = ref(false);
</script>

<template>
  <BlessButton @click="open = true">Open modal</BlessButton>
  <BlessModal v-model="open" title="Blu-ray Disc BOX">
    <BlessText as="p">native &lt;dialog&gt;: focus trap, Esc, backdrop click, top layer.</BlessText>
    <template #footer>
      <BlessButton variant="outline" @click="open = false">閉じる</BlessButton>
      <BlessButton @click="open = false">購入</BlessButton>
    </template>
  </BlessModal>
</template>

Hash

Open via #chara-megumi

加藤恵

opened from the URL hash — reload keeps it open, closing clears the hash.

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessModal, BlessText } from "blessing-ui";
const open = ref(false);
</script>

<template>
  <BlessButton href="#chara-megumi">Open via #chara-megumi</BlessButton>
  <BlessModal v-model="open" hash="chara-megumi" size="lg" title="加藤恵">
    <BlessText as="p"
      >opened from the URL hash — reload keeps it open, closing clears the hash.</BlessText
    >
  </BlessModal>
</template>

• A native <dialog>: the page behind is inert, Tab stays inside, Esc closes it, and focus returns to what opened it. It is named by its title.
• dismissible (default) also closes it on a backdrop click. hash ties it to the URL, so a link can open it and Back closes it.

Usage

import { BlessModal } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
hash	string	—	open when location.hash matches; open/close updates the hash (saenai-style deep links)
size	"md" | "sm" | "lg" | "full"	"md"
dismissible	boolean	true	click on backdrop closes
closeLabel	string	"Close"
modelValue	boolean	false

Events

Name	Payload	Description
update:modelValue	[value: boolean]
close	[]

Slots

Name	Scope	Description
title	—
default	—
footer	—