ダイアログ ボックス (モーダル ボックスやフローティング レイヤーとも呼ばれます) は、Web プロジェクトでのユーザー インタラクションの重要な部分です。私たちが使用する最も一般的なものは、js のalert() とconfirm() です。ただし、このダイアログ ボックスは美しくないため、使用できません。スタイルはカスタマイズできるため、開発プロセスでは通常、独自のニーズに応じてホイールを構築するか、サードパーティ製のホイールを使用します。
ダイアログボックスの構成ポップアップ ボックスの一般的な形式は次のとおりです。
位置: 画面の左上隅、右上隅、左下隅、右下隅、垂直中央など。
サイズ: 固定幅と固定高さ、固定幅と固定高さ、可変幅と固定高さなど。
開発中のダイアログフォームは、位置とサイズをランダムに組み合わせたものです。
ただし、実装が簡単ではない状況 (幅と高さが可変の垂直方向のセンタリング) が 1 つあります (これを実現するには、display:table または CSS3 のTranslate または flex を使用できます)。詳細については、水平方向および垂直方向のセンタリング レイアウトを参照してください。 。
上のダイアログ ボックスにはコンテンツのコンテナが含まれており、ダイアログ ボックスの下にもマスク レイヤー (マスク) があります。マスク レイヤーは、ユーザーがポップアップ ボックスをトリガーした後に形成されるダイアログ ボックスとページ本体の間の分離レイヤーです。その存在により、ユーザーにより明らかな視覚的な違いの効果を与えると同時に、ユーザーがダイアログ ボックスをトリガーした後の他の不要なページのメイン操作を回避し、それによってより良いユーザー エクスペリエンスを生み出すことができます。
問題があります選択できるダイアログ ホイールは多数ありますが、さまざまな問題に直面しています。
では、ダイアログボックスを作成する簡単な方法はあるのでしょうか?もちろん、HTML5 ダイアログ要素を使用することもできます。
HTML5(ダイアログ)
<ダイアログを開く> <h2>こんにちは。</h2></dialog>
上記のコードを使用すると、「Hello world」という内容のポップアップ ダイアログ ボックスを作成できます。
ダイアログボックスを表示する場合は open 属性を追加し、非表示にする場合は削除することで、ダイアログ ボックスの表示/非表示を制御することも簡単です。もちろん、DOM インターフェイス (show()、close()) を通じてダイアログの表示と非表示を制御することもできます。
ダイアログ ボックスの下のマスク レイヤには、::backgrop 疑似要素を使用できます。これをアクティブにするには、showModal() DOM API を使用する必要があります。::backgrop の特徴は、その位置がダイアログの下にあることです。 、上記の任意の z -index にあります。
showModal() を使用すると、マスク レイヤーだけでなくダイアログ コンテナーも表示できるため、::backdrop を使用する場合、キーボードの ESC キーを押すと、show() API の代わりに showModal() を使用できます。もちろん、close() DOM API を使用することもできます。
::backdrop レイヤーを半透明レイヤーに設定できます。コードは次のとおりです。
ダイアログ::背景 {背景色: rgba(0, 0, 0, 0.75);}プロンプト情報を含む一般的なポップアップ レイヤーに加えて、より一般的に使用されるフォームを含むポップアップ レイヤーもあります。
フォーム付きポップアップレイヤーHTML5 ダイアログ要素とフォーム要素を組み合わせてこれらのポップアップ レイヤーを作成できますか?
答え:はい
フォーム要素とダイアログ要素を密接に組み合わせるにはどうすればよいでしょうか?
回答: ダイアログ要素にメソッド=ダイアログ属性を追加するだけで、ボタン要素の属性値をダイアログ要素に渡すことができます。
<dialog> <form method=dialog> <p>確認またはキャンセル</p> <button type=submit value=yes>確認</button> <button type=submit value=no>キャンセル</button> </form ></dialog><script> var ダイアログ = document.querySelector('dialog') ダイアログ.showModal() ダイアログ.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>デモ
ブラウザの互換性これは比較的使いやすい HTML5 ですが、互換性の問題がまだあり、Firefox では実験的な機能ですが、iOS では十分にサポートされていません。 Android もそれをサポートしていますが、十分ではなく、Android 6 以降でのみサポートされています。詳細については、caniuse を参照してください。
では、古いバージョンのブラウザは HTML5 ダイアログをサポートできるのでしょうか?まず第一に、es6 の新機能をサポートする babel-polyfill のように、ダイアログをサポートするポリフィルがあるかどうかについて考えます。実際に、vue と vue のさまざまなバージョンを提供するオープンソース プロジェクト a11y-dialog が存在します。それぞれ反応します。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。