操作をブロックするモーダルダイアログにする

「モーダル（Modal）」とは、そのウィンドウやダイアログが閉じられるまで、親画面を操作できなくする仕組みのことです。

前提条件

プラグインの追加

ダイアログ機能を利用するには dialog プラグインが必要です。

npm run tauri add dialog

src-tauri/src/lib.rs に .plugin(tauri_plugin_dialog::init()) が追加されていることを確認してください。

Permissions (権限) の設定

src-tauri/capabilities/default.json に core:default 権限を追加します。

{
  "permissions": [
    ...,
    "dialog:default"
  ]
}

1. フロントエンドから作成する (TypeScript)

ネイティブダイアログを利用する

@tauri-apps/plugin-dialog の関数はデフォルトでモーダルです。

import { message } from '@tauri-apps/plugin-dialog';

// この処理が完了するまでブロックされます
await message('操作できません', { title: 'Modal' });

HTML5 dialog を利用する

showModal() を使用します。

const dialog = document.getElementById('my-dialog') as HTMLDialogElement;
dialog.showModal(); // 背景操作不可

別ウィンドウをモーダルにする（高度）

parent オプションを指定してウィンドウを作成します。

import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
import { getCurrentWindow } from '@tauri-apps/api/window';

const appWindow = getCurrentWindow();

// 新しいウィンドウを、現在のウィンドウの子として作成
const modal = new WebviewWindow('modal', {
  url: 'modal.html',
  parent: appWindow.label,
  alwaysOnTop: true,
});

補足

• ネイティブダイアログ: 最も簡単で確実なブロック手段です。
• <dialog>: デザインをカスタマイズしたい場合に最適です。