dialog要素を使うと、閲覧者が操作可能なダイアログを表示することができます。
ダイアログというのは、現在見ているウィンドウに重なるように表示されるメッセージ欄みたいなもので、ユーザーが見逃さないようになっています。
このボタンをクリックすると、ダイアログが表示され、表示されたダイアログにある閉じるボタンをクリックすると、ダイアログが閉じます。（※スマホでは初めから表示された状態になってしまっていますが。。）
<button type=”button” onclick=”document.getElementById(‘d’).show();”>ダイアログを表示</button>
<dialog id=”d”>
ダイアログが表示されました！
<button type=”button” onclick=”document.getElementById(‘d’).close();”>閉じる</button>
</dialog>
<dialog id=”d”>
ダイアログが表示されました！
<button type=”button” onclick=”document.getElementById(‘d’).close();”>閉じる</button>
</dialog>
コードはこのようになっています。
ボタンで指定しているonclick属性は、ユーザーがクリックしたときにスクリプトを実行するという意味のイベントハンドラ属性で、この場合だと、「ダイアログを表示」するボタンをクリックしたらダイアログを表示するスクリプトが実行され、「閉じる」ボタンをクリックしたらダイアログを閉じるスクリプトが実行されるという風に記述しています。
また、dailog要素にopen属性を指定すると、ダイアログは初期状態から表示されます。（邪魔になるので今は表示させませんが。）
ちなみにopen属性は値を必要としない論理属性です。
Leave a Comment