cman.jpWEBページ作成
広告
<dialog> 「ダイアログボックス」[読み方：ダイアログ]
<dialog>タグは、ダイアログボックスを表示するために利用します。
ダイアログボックスは、javascriptで表示／非表示を制御します。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<dialog>は、HTML5以降に追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<dialog> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ | フローコンテンツを子要素にもてる場所 | フローコンテンツ | 不可 |
<dialog>の属性
【構文】
<dialog>～ダイアログボックス内容～</dialog>
<dialog>のサンプル
1.ダイアログボックスの定義
<dialog open>
<label>氏名<input type="text" size="30" autofocus></label>
</dialog>
<label>氏名<input type="text" size="30" autofocus></label>
</dialog>
2.ダイアログボックスを表示
<p><button type="button" id="opnBtn">ダイアログを表示</button></p>
<dialog id="smpldlog" style="width: 250px; height: 100px; text-align: center;">
<label>氏名：<input type="text" size="30" autofocus></label>
<p><button type="button" id="clsBtn">閉じる</button></p>
</dialog>
<script>
var opnBtn = document.getElementById('opnBtn');
var clsBtn = document.getElementById('clsBtn');
var smpldlog = document.getElementById('smpldlog');
opnBtn.addEventListener('click', function() {
smpldlog.show();
});
clsBtn.addEventListener('click', function() {
smpldlog.close();
});
</script>
<dialog id="smpldlog" style="width: 250px; height: 100px; text-align: center;">
<label>氏名：<input type="text" size="30" autofocus></label>
<p><button type="button" id="clsBtn">閉じる</button></p>
</dialog>
<script>
var opnBtn = document.getElementById('opnBtn');
var clsBtn = document.getElementById('clsBtn');
var smpldlog = document.getElementById('smpldlog');
opnBtn.addEventListener('click', function() {
smpldlog.show();
});
clsBtn.addEventListener('click', function() {
smpldlog.close();
});
</script>
留意事項
| 関連するHTMLタグ | |
|---|---|
| label | 入力部品とラベルの関連付け |
広告