ホームページ > 記事 > ウェブフロントエンド > html5ダイアログの使い方を詳しく解説

html5ダイアログの使い方を詳しく解説

小云云オリジナル: 2018-03-01 09:18:316307ブラウズ

1. 前に書いてあります

ダイアログタグと言えば、結局のところ、HTML5.2標準までは修正されず、Chromeブラウザでのみサポートされていたタグなので、馴染みがない人も多いかもしれません。このタグを使用すると、会話の意味も明確に理解できるようになります。

ここで考えられるのは、アラート、確認、およびその他のポップアップウィンドウです。はい、これらは同じファミリーに属しており、すべてポップアップボックスです。次に、いくつかのプロパティと使用シナリオを簡単に説明します。ダイアログタグの。

2. タグの使用法

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

これはタグであるため、実際には、上記のサンプルコードに示すように、他の要素を内部的にサポートしています。。

ここで、上記のサンプルコードの open 属性がこのポップアップウィンドウの表示と非表示を制御するために使用されていることに気付くかもしれません。もちろん、CSS を使用して任意に制御することもできます。この場合、一部のデバイスの補助機能（アクセシビリティ、画面読み上げソフトなど）を使用すると異常が発生する場合がありますので、標準で備わっている表示・非表示機能を使用することをお勧めします。

3. サポートされているデフォルトメソッド

まず、dialog タグは HTMLDialogElement の例であり、HTMLElement から継承されているため、p タグと同じレベルのタグです。唯一の違いは、サイズが小さいことです。このセクションでは、ダイアログで使用できるデフォルトのメソッドを見ていきます。

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

まずサンプルにアクセスして操作し、次にどのような機能があるかを確認してから、戻って比較することができます。以下の概要:

1: close メソッドは複数回呼び出すことができます。 if Hidden 状態を再度呼び出すこともできます。

2: close は変数を渡すことができます。変数は文字列であり、returnVlaue で表現される必要があります。

3: show メソッドは、非表示状態であっても問題なく複数回呼び出すこともできます。

4: show メソッドはトーストの位置を変更しません。show メソッドが呼び出された後も、ポップアップボックスは元の位置のままです。

5: showメソッド。表示位置は前の要素のすぐ後ろで中央にあり、背後にマスクレイヤーはありません。z-indexの表示モードは、z-indexを設定しない相対モードと同様です(設定されていない場合) showModal の前に呼び出されます)。

6: showModal が呼び出された場合、show メソッドの後、要素は showModal で表示された位置に表示され、(コンテンツの高さが大幅に変化しても) 変化しません。

7: HTML 構造内で 2 つのダイアログ要素があり、その両方で show メソッドが呼び出された場合、(どのダイアログが最初に show メソッドを呼び出すかに関係なく) 後のダイアログが常に前のダイアログをカバーします。

8: showModal の表示の背後にマスクレイヤーがあります。表示レベルはブラウザの Web ビューレベルです。これを理解するには、showModal を使用してダイアログ属性を表示します。、ダイアログは前面に表示されます。これは特にモーダルボックスに適しています。ポップアップボックスが表示された後に階層が混乱することはありません。

9: showModal は 1 回しか呼び出すことができません。ここでの 1 回とは、ダイアログが表示状態にある場合、再度 showModal を呼び出すとエラーが報告され、直接実行できないことを意味します。 open 属性が存在する限り、再度呼び出すとエラーが報告されるため、ダイアログの表示と非表示にはデフォルトの open 属性を使用することをお勧めします。

10: ページ上に 2 つのダイアログ要素があり、両方が showModal メソッドを呼び出している場合、HTML 内の構造に関係なく、後で呼び出されるダイアログのレベルは、前に呼び出されたダイアログのレベルよりも高くなります。

11:dialog.returnVlaue の値は、dialog.close(string) の呼び出し時に渡される値です。dialog.close の呼び出しによって渡される値は、ダイアログが表示されている場合にのみ有効です。

12: close に値が渡されない場合、returnVlaue の値は空になります。値 Dialog.close("1") が一度渡された場合、次の表示の後、dialog.close() が閉じられ、returnVlaue が返されます。は依然として「1」に等しい。

13: open の戻り値は true/false です。

4. サポートされているデフォルトイベント

ダイアログのもう 1 つの利点は、クリックなどの基本イベントに加えて、ダイアログの 2 つの追加の特別なイベントをサポートしていることです。表示例。

また、いくつかの問題があるので、ここにリストしてみましょう:

1: ダイアログを非表示にするために、dialog.close() を呼び出した場合にのみ、onclose イベントをトリガーできます。

2: cancel イベントがトリガーされた後、close イベントは確実にトリガーされ続けます。chrome64 バージョン以降、esc キーによってキャンセルはトリガーされません。

3: ダイアログを閉じるボタンが複数ある場合は、close イベントのコールバックで、returnVlaue の値を使用して、どのボタンをトリガーするかを決定します。イベントを閉じます。

5. その他

ダイアログのパフォーマンスの一部は、不完全または不正確である可能性があります。また、時間の経過とともに新しい機能が登場する可能性があります。

前の例を見ると、スタイルが特に醜いなどのいくつかの欠点もありました。これに関しては、セマンティクスや他のものに影響を与えることなく、CSS を完全に使用してスタイルをリセットできます。心配しないでください。それ。

ここではダイアログのパフォーマンスについて話したいだけなので、それはしません。

6. 概要

dialog は、結局のところ、ポップアップダイアログのセマンティックタグであり、いくつかの独自の利点 (Webview レベルの高さなど) を持っていますが、現在は Chrome でのみサポートされています。将来的にはまだ非常に便利です。できれば、今すぐ互換性を持たせて、ダイアログメカニズムを他のブラウザに実装できるようにしてください (おそらく、これについてはすでに実装計画があるので、ここでは調べません)。

html5ダイアログの使い方を詳しく解説

関連記事