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

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

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

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

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

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

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

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

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

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

問題

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

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

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

• #スケーラビリティ

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

dialog

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

<dialog>
    <h2 id="Hello-world"> 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

の値を追加することができます。ダイアログ要素を渡します。 <pre class="brush:php;toolbar:false">&lt;dialog&gt;   &lt;form&gt;     &lt;p&gt;确定 or 取消&lt;/p&gt;     &lt;button&gt;确定&lt;/button&gt;     &lt;button&gt;取消&lt;/button&gt;   &lt;/form&gt; &lt;/dialog&gt; &lt;script&gt; var dialog = document.querySelector(&amp;#39;dialog&amp;#39;) dialog.showModal() dialog.addEventListener(&amp;#39;close&amp;#39;, function(event) { console.log(dialog.returnValue) }) &lt;/script&gt;</pre>demo<pre class='brush:php;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:php;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:php;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 サイトの他の関連記事を参照してください。