<dialog>要素の使い方・サンプルコード
Sara
目次
<dialog>
<dialog>要素は、ダイアログを作成します。
デモ：dialog要素
*IE, Edge, Safari は非対応
属性
open
ダイアログを開いた状態にしておくことができます。論理属性です。
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
例① 開いた状態のダイアログ
HTML
<dialog id="dialog" open>
<p>Hello World</p>
</dialog>実行結果
例② 開閉ボタンを付けたダイアログ（JavaScript で実装）
デモ（ボタンを押すことができます。）
Chrome と Opera のみ対応
JavaScript API に用意されている show メソッドと close メソッドを使って、ダイアログの表示・非表示を切り替えます。
<dialog id="dialog">
<p>Hello World</p>
</dialog>
<button onclick="openDialog()">開く</button>
<button onclick="closeDialog()">閉じる</button>
<script type="text/javascript">
var dialog = document.getElementById('dialog');
function openDialog() {
dialog.show();
}
function closeDialog() {
dialog.close();
}
</script>Chrome, Opera,Firefox に対応
「開く」ボタンを押したときに open 属性を付与、「閉じる」ボタンを押したときに open 属性を外すことでダイアログの表示・非表示を切り替えます。
<dialog id="dialog">
<p>Hello World</p>
</dialog>
<button onclick="openDialog()">開く</button>
<button onclick="closeDialog()">閉じる</button>
<script type="text/javascript">
var dialog = document.getElementById('dialog');
function openDialog() {
dialog.setAttribute('open','');
}
function closeDialog() {
dialog.removeAttribute('open');
}
</script>対応ブラウザ
関連するタグ
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
