ホームページ > 記事 > ウェブフロントエンド > HTML5ダイアログとは何ですか? HTML5 でダイアログを使用してポップアップ ウィンドウをシミュレートするにはどうすればよいですか?
HTML5ダイアログとは何ですか? HTML5 でダイアログを使用してポップアップ ウィンドウをシミュレートするにはどうすればよいですか?
- 寻∝梦オリジナル
- 2018-08-15 17:41:234682ブラウズ
HTML5ダイアログとは何ですか? HTML5 でダイアログを使用してポップアップ ウィンドウをシミュレートするにはどうすればよいですか?この記事では主に、HTML5 のダイアログ タグの定義と具体的な使用法、および HTML5 のダイアログ タグを使用してポップアップ ウィンドウをシミュレートする方法について説明します。
HTML5 ダイアログ タグの定義と使用法:
a38fd2622755924ad24c0fc5f0b4d412 タグは、会話などのダイアログを定義します。
例は次のとおりです:
<dialog> <dt>老师</dt> <dd>1+1 等于？</dd> <dt>学生</dt> <dd>2</dd> <dt>老师</dt> <dd>答对了！</dd> </dialog>
ヒントとメモ:
ヒント: 会話内のすべての文は、73de882deff7a050a357292d0a1fca94 タグで定義されたセクションに含まれる必要があります。以下の例を参照してください。
タグの定義と使用方法:
a38fd2622755924ad24c0fc5f0b4d412 タグは、ダイアログ ボックス、確認ボックス、またはウィンドウを定義します。
これは例です:
<table border="1"> <tr> <th>January <dialog open>This is an open dialog window</dialog></th> <th>February</th> <th>March</th> </tr> <tr> <td>31</td> <td>28</td> <td>31</td> </tr> </table>
HTML5 ダイアログ タグの属性:
open: open は、ダイアログ要素が有効であり、ユーザーが対話できることを指定します。
最近、ウェブ上の多くのプロセスは、完了する前にユーザーの完全な同意を必要とします。たとえば、ユーザーはアカウントを削除したり、ユーザー名を変更したり、金銭取引を確認したりする必要がある場合があります。
この場合、一般的なユーザー エクスペリエンス (UX、ユーザー エクスペリエンス デザイン) は、2 つのボタンのあるダイアログ ボックスを表示することです。 1 つはキャンセルすること、もう 1 つは続行することです。長年にわたり、この効果を実現するために JavaScript ライブラリに依存してきましたが、この記事では、a38fd2622755924ad24c0fc5f0b4d412 要素を使用してこの効果を実現します。
ダイアログ要素を使用します:
a38fd2622755924ad24c0fc5f0b4d412 は HTML5 (正確には 5.1) 要素です。これは、6c04bd5ca3fcae76e30b72ad730ca86d、b8a712a75cab9a5aded02f74998372b4、a5e9d42b316b6d06c62de0deffc36939 要素と同様に「スライス ルート」として分類され、それぞれが body の子として扱うことができる新しい独立したコンテンツ領域を作成します。
<body>
<div>
<dialog></dialog>
</div>
<section>
<dialog></dialog>
</section>
<dialog></dialog>
</body>デフォルトでは、サポートされているブラウザー (Chrome 37 以降および Opera 27 以降) は、JavaScript の show() メソッドまたは showModal() メソッドを呼び出すことによってのみ表示されます。 () メソッドで再度非表示にします。通常、次のように、クリック イベントでこのメソッドを実行します。
var $accountDelete = $('#delete-account'),
$accountDeleteDialog = $('#confirm-delete');
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
});
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
});カスタム スタイル:
他のほとんどの要素と同様、ダイアログ ボックスはブラウザのデフォルト スタイルを簡単にオーバーライドできます。したがって、そのスタイルをカスタマイズできます。たとえば、ダイアログ ボックスの境界線を細くしたり、角を丸くしたり、影の効果を追加したりすることができます。
さらに、a38fd2622755924ad24c0fc5f0b4d412 要素が (ShowModal() メソッドを使用して) モーダルに表示される場合、追加の疑似要素::backdrop を追加します。 ::backdrop 要素はダイアログ ボックスのすぐ下にあり、ビューポート全体とその下の他の要素をカバーします。
ブラウザのサポート:
現在、Chrome と Safari 6 のみが a38fd2622755924ad24c0fc5f0b4d412 タグをサポートしています。
【関連おすすめ】
以上がHTML5ダイアログとは何ですか? HTML5 でダイアログを使用してポップアップ ウィンドウをシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。