ダイアログ要素 - モーダルを簡単に
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Chrome Canary で、フラグ付きのダイアログ要素がサポートされるようになりました。dialog
要素は、ウェブページ内のポップアップに使用できます。
show()
: ダイアログを開きます。
close()
: ダイアログを閉じます。オプションの引数を取ります。存在する場合は、dialog.returnValue
が設定されます。
showModal()
: モーダル ダイアログを開きます。
::backdrop
: モーダル ダイアログの背景をスタイル設定する疑似要素です。
close
イベント: ダイアログが閉じられたときに発生します。
更新日: 2013 年 12 月 16 日
dialog
要素で以下がサポートされるようになりました。
cancel
イベント: モーダル ダイアログで Esc キーを押すと発生します。このイベントは event.preventDefault()
でキャンセルできます。
autofocus
属性: autofocus
属性(存在する場合)を持つモーダル ダイアログの最初のフォーム コントロールは、ダイアログの表示時にフォーカスされます。このような要素がない場合、最初のフォーカス可能な要素がフォーカスされます。
form[method="dialog"]
: ダイアログ内でのみ有効です。フォームの送信時にダイアログを閉じ、使用された送信ボタンの値に dialog.returnValue
を設定します。
ライブデモとポリフィルで詳細を確認します。
この機能を有効にするには、chrome://flags/ で [EnableExperimental Web Platform features] を有効にします。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2013-09-22 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]