dialog : ダイアログ edgeiesafariios

カテゴリ

デモ

<!-- フォームは機能しないようになっているため、submitしてもダイアログは閉じません -->
<form method=dialog style="height:15em;"><dialog open>
 <h1>Add to Wallet</h1>
 <p><strong><label for=amt>How many gold coins do you want to add to your wallet?</label></strong></p>
 <p><input id=amt name=amt type=number min=0 step=0.01 value=100></p>
 <p><small>You add coins at your own risk.</small></p>
 <p><label><input name=round type=checkbox> Only add perfectly round coins </label></p>
 <p><input type=submit value="Add Coins"></p>
</dialog></form>
↑この領域は編集できます(シンタックスハイライトは同期しません)。

説明

ダイアログ。ウィンドウの真ん中に表示される。 一般的な認識と異なり、ダイアログ表示中も他の周囲の要素にアクセスできるので、ダイアログ以外の部分を触らせたくない場合は別途制御が必要(::backdrop疑似要素など)。

未対応のブラウザのためのdialog-polyfillA11y Dialogといったポリフィルがある。

属性 属性値の見方

open(真偽値)
ダイアログが表示された状態