HTML5のdialog要素の詳しい説明（コード例）-H5 チュートリアル-php.cn

HTML5のdialog要素の詳しい説明（コード例）

不言

リリース： 2018-10-13 14:51:08

転載

3577 人が閲覧しました

この記事では、HTML5 のダイアログ要素の詳細な説明 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

ダイアログボックス (モーダルボックス、フローティングレイヤーとも呼ばれます) は、Web プロジェクトでのユーザー操作にとって重要な部分です。最も一般的なものは、js の alert()、confirm() です。ただし、このダイアログボックスは美しくなく、スタイルをカスタマイズできないため、開発プロセスでは通常、独自のニーズに応じてホイールを作成するか、サードパーティを使用します。

ダイアログボックスの構成

一般的なポップアップボックスの形式:

位置: 画面の左上隅、右上隅、左下隅、右下隅、垂直方向のセンタリングなど。

サイズ: 固定幅と固定高さ、固定幅と可変高さ、可変幅と可変高さなど。

開発中のダイアログフォームは位置のランダムな組み合わせです。そしてサイズ。

しかし、実装が簡単ではない状況 (幅と高さが可変の垂直方向の中央揃え) が 1 つあります (これを実現するには、display:table または CSS3 のtranslate または flex を使用できます)。詳細については、を参照してください。水平方向および垂直方向の中央揃えレイアウト

上ダイアログボックスにはコンテンツコンテナが含まれており、ダイアログボックスの下にはマスクレイヤー (マスク) もあります。マスクレイヤーは、ダイアログボックスとページ本体の間の分離レイヤーです。ユーザーがポップアップボックスをトリガーした後に形成されるこのダイアログボックスの存在により、ユーザーに対してより明らかな視覚的な違い効果を与えることができ、また、ダイアログボックスをトリガーした後にユーザーが他の不要なページのメイン操作を行うのを防ぐことができるため、より良いユーザーエクスペリエンスが得られます。

問題

ダイアログホイールは多数から選択できますが、さまざまな問題に直面しています。

どのダイアログボックスを選択するか (選択症候群の人にとっては頭痛の種)
使いやすさ (API がシンプルかどうか、他のものに依存するか)サードパーティライブラリ）
#スケーラビリティ

dialog

要素を使用することもできます。 HTML5(ダイアログ)

<dialog open>
    <h2> Hello world.</h2>
</dialog>

ログイン後にコピー

上記のコードを使用すると、「Hello world.」ポップアップの内容を含むダイアログボックスを作成できます。

ダイアログボックスの表示/非表示を制御することも簡単です。表示する場合は

open

属性を追加し、非表示にする場合は削除します。もちろん、DOM インターフェイスを使用して、dialogダイアログボックスの下のマスクレイヤの表示 (show()、close()) を制御することもできます。

: :backgrop

疑似要素であり、それをアクティブにするには、この DOM の showModal() API を使用する必要があります。 ::backgrop の特徴は、その位置です。任意の z-index の上にあります。 #showModal()

を使用すると、マスクレイヤーだけでなくダイアログコンテナーも表示できるため、

::backdrop を使用する場合は、showModal を使用できます。 () は show() API を置き換えます。キーボードの ESC キーを押すと、ポップアップレイヤーが閉じられます。もちろん、## を使用することもできます。 #close() DOM API。 ::backdrop を設定できます。このレイヤーは半透明のレイヤーであり、コードは次のとおりです。

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

ログイン後にコピー

一般的なポップアップレイヤーに加えて、プロンプト情報のほか、フォームのあるポップアップレイヤーを使用したクラス比較もあります。フォームを含むポップアップレイヤー

フォーム要素と組み合わせた HTML5 ダイアログ要素を使用して、これらのポップアップレイヤーを作成できますか?

答え: はい

フォーム要素とダイアログ要素を緊密に組み合わせるにはどうすればよいでしょうか?

回答: 属性

method="dialog"

をダイアログ要素に追加するだけで、ボタン要素の属性

value

の値を追加することができます。ダイアログ要素を渡します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><dialog> <form method="dialog"> <p>确定 or 取消</p> <button type="submit" value="yes">确定</button> <button type="submit" value="no">取消</button> </form> </dialog> <script> var dialog = document.querySelector('dialog') dialog.showModal() dialog.addEventListener('close', function(event) { console.log(dialog.returnValue) }) </script></pre><div class="contentsignin">ログイン後にコピー</div></div>demo<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">var dialog = document.querySelector(&#39;dialog&#39;) dialog.showModal() dialog.addEventListener(&#39;close&#39;, function(event) { alert(dialog.returnValue) })</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><dialog> <form method="dialog"> <p>确定 or 取消</p> <button type="submit" value="yes">确定</button> <button type="submit" value="no">取消</button> </form></dialog></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">dialog::backdrop { background: rgba(0, 0, 0, 0.6) }</pre><div class="contentsignin">ログイン後にコピー</div></div>ブラウザの互換性

これは比較的使いやすい HTML5 ですが、Chrome と Opera の方がサポートが優れています。は Firefox の実験的な機能ですが、IE、Edge、Safari では十分にサポートされていません。Android 6 以降でのみサポートされています。詳細については、caniuse を参照してください。