モーダル（ポップアップウィンドウ）ジェネレーター（dialog使用）

モーダル（ポップアップウィンドウ）ジェネレーター（dialog使用）: 用途

モーダルウィンドウは、操作の確認、短いフォームの表示、ページから離れずに案内を目立たせたいときに使います。divで手作りすると、キーボードやスクリーンリーダーで問題が起きがちです。

このジェネレーターはshowModal()を使ったdialog要素を使います。2022年以降のすべての現行ブラウザーが対応しています：ブラウザーがウィンドウを最前面に置き、ページの残りを無効にし、フォーカスを固定し、Escキーで閉じ、ボタンにフォーカスを戻します。コードには、スタイル、外側のクリックで閉じる処理、動きを抑えたい設定に配慮した@starting-styleによるなめらかな表示が加わります。

使い方

1. タイトル、テキスト、ボタンを書きます。
2. 色、幅、角丸を選びます。
3. プレビューで試して、コードをコピーします。

使うタイミング

• LINEで予約する案内。
• 操作の前の確認。
• お知らせや短いフォーム。

よくある質問

なぜdialog要素を使うのですか？

showModal()を使うと、ブラウザーがウィンドウを最前面に置き、ページの残りを無効にし、フォーカスをウィンドウ内に固定し、Escキーで閉じ、開いたボタンにフォーカスを戻します。以前はかなりのJavaScriptが必要で、ほぼ必ずアクセシビリティの不備が残りました。

すべてのブラウザーで動作しますか？

はい。dialogは2022年から、Chrome、Edge、Firefox、Safariで対応しています。

サイトに入ったときにモーダルを自動で開いてもいいですか？

可能ですが、ユーザーが求めていないポップアップは不快に思われやすく、スマートフォンでは、コンテンツを覆う邪魔な広告のあるページをGoogleが評価を下げることがあります。ボタンから開くようにするのがおすすめです。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール