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

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

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

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

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

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

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

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

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

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

問題

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

• どのダイアログ ボックスを選択するか (選択症候群の人にとっては頭痛の種)

• 使いやすさ (API がシンプルかどうか、他のものに依存するか)サードパーティ ライブラリ）

• #スケーラビリティ

#ブラウザの互換性サポート
つまり、ダイアログボックスを作る簡単な方法は？もちろん、HTML5 の

dialog

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

a144f22e2a850e633abba38330027819
    c1a436a314ed609750bd7c7d319db4da Hello world.2e9b454fa8428549ca2e64dfac4625cd
e949bf554aab987df819ed6441bc3609

上記のコードを使用すると、「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

の値を追加することができます。ダイアログ要素を渡します。 <pre class="brush:php;toolbar:false">a38fd2622755924ad24c0fc5f0b4d412   9a80b60279a1fc3cc29b87aae5a888b1     e388a4556c0f65e1904146cc1a846bee确定 or 取消94b3e26ee717c64999d7867364b1b4a3     1d15c23a371098d0a91cc26c5f5df8f6确定65281c5ac262bf6d81768915a4a77ac0     73f05620b8d0f192df010cbb16b76d67取消65281c5ac262bf6d81768915a4a77ac0   f5a47148e367a6035fd7a2faa965022e e949bf554aab987df819ed6441bc3609 3f1c4e4b6b16bbbd69b2ee476dc4f83a     var dialog = document.querySelector('dialog')     dialog.showModal()     dialog.addEventListener('close', function(event) {         console.log(dialog.returnValue)     }) 2cacc6d41bbb37262a98f745aa00fbf0</pre>demo<pre class="brush:js;toolbar:false">var dialog = document.querySelector(&amp;#39;dialog&amp;#39;) dialog.showModal() dialog.addEventListener(&amp;#39;close&amp;#39;, function(event) { alert(dialog.returnValue) })</pre><pre class="brush:html;toolbar:false">&lt;dialog&gt; &lt;form method=&quot;dialog&quot;&gt; &lt;p&gt;确定 or 取消&lt;/p&gt; &lt;button type=&quot;submit&quot; value=&quot;yes&quot;&gt;确定&lt;/button&gt; &lt;button type=&quot;submit&quot; value=&quot;no&quot;&gt;取消&lt;/button&gt; &lt;/form&gt;&lt;/dialog&gt;</pre><pre class="brush:css;toolbar:false">dialog::backdrop { background: rgba(0, 0, 0, 0.6) }</pre>ブラウザの互換性

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

それでは、古いバージョンのブラウザは HTML5 ダイアログをサポートできますか?まず第一に、es6 の新機能をサポートする babel-polyfill のように、ダイアログをサポートするポリフィルがあるかどうかについて考えます。実際に、vue と vue のさまざまなバージョンを提供するオープンソース プロジェクト a11y-dialog が存在します。それぞれ反応します。

以上がHTML5のdialog要素の詳しい説明（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。