dialog タグを利用したダイアログの表示のコードを紹介します。
概要
HTML5に対応したWebブラウザでは
dialog タグを利用してダイアログのポップアップを簡単に表示できます。
この記事では
dialog タグによるダイアログの表示コードを紹介します。
書式
dialogタグの書式は次の通りです。
<dialog id="ダイアログのID">
<content>
<!-- ダイアログ内に表示するコンテンツを記述します -->
</content>
</dialog>
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function showDialog() {
var elem = document.getElementById('mydialog');
elem.showModal();
}
function closeDialog() {
var elem = document.getElementById('mydialog');
elem.close();
}
</script>
</head>
<body>
<p>dialog タグのデモです。</p>
<p><a href="javascript:showDialog();">ダイアログの表示</a></p>
<dialog id="mydialog">
<content>
ダイアログです。
<button onclick="closeDialog();">Close</button>
</content>
</dialog>
</body>
</html>
解説
dialogタグのコンテンツはデフォルトでは非表示です。
[ダイアログの表示]リンクをクリックすると下記のJavaScriptを実行します。
getElementById メソッドを呼び出し、dialogタグの要素を取得します。取得した
dialogタグの要素の showModal() メソッドを呼び出すと
ダイアログを表示できます。
function showDialog() {
var elem = document.getElementById('mydialog');
elem.showModal();
}
ダイアログ内の[Close]ボタンをクリックすると下記のJavaScriptを実行します。
getElementById メソッドを呼び出し、dialogタグの要素を取得します。
dialogタグの要素の Close() メソッドを呼び出すとダイアログを
非表示にできます。
function closeDialog() {
var elem = document.getElementById('mydialog');
elem.close();
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページの[ダイアログの表示]リンクをクリックします。
下図の画面に切り替わります。画面の中央にポップアップのダイアログが表示されます。背景も暗くなります。
ポップアップ表示されたダイアログの[Close]ボタンをクリックします。
[Close]ボタンをクリックするとダイアログが閉じられ元のページに戻ります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2021-08-31
作成日: 2021-01-19
