HTML5 における dialog 要素のテイスト

ダイアログ（また、モーダルボックス、フローティング層として知られている）ユーザーとの対話のためのWebプロジェクトの重要な部分である、我々は最も一般的にアラート（）、jsで（）を確認しますが、このダイアログが美しくないとカスタマイズすることはできませんので、開発の過程で、一般的にホイールを構築したり、サードパーティを使用して、自分のニーズによると、。

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

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

位置：画面の左上、右上、左下、右下、垂直方向中央など

サイズ：幅と高さが固定、幅と高さが固定、幅と高さが固定、など。

開発中のダイアログの形は、位置と大きさがランダムに組み合わされたケースです。

しかし、1つのケース（幅と高さが可変の垂直方向の中央揃え）は、（display:tableを使うか、css3のtranslateやflexを使って）簡単に実現できないので、以下を参照してください。 水平・垂直方向のセンタリングレイアウト

上のダイアログボックスにはコンテンツを入れるコンテナがあり、ダイアログボックスの下にはマスクレイヤー（マスク）があります。マスク層は、ユーザーがポップアップボックスをトリガーした後に形成されるダイアログボックスとページ本体の間の分割層であり、その存在は、ユーザーにより明白な視覚的差異効果を与えることができ、またユーザーがダイアログボックスをトリガーした後の他の不必要なページ本体操作を回避する役割を果たし、よりユーザー体験を生み出すことができる。

プレゼンスに関する問題

ダイアログホイールはたくさんありますが、いろいろな問題があります。

• どのダイアログボックスを選ぶか（選択症候群の人は頭が痛いです）
• ユーザビリティ（APIのシンプルさ、他のサードパーティライブラリへの依存性）
• 拡張性
• ブラウザの互換性サポート

では、ダイアログボックスを簡単に作る方法はあるのでしょうか？もちろんあります。HTML5のdialog要素を使えばいいのです。

HTML5(ダイアログ)

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

簡単に言うと、上記のコードを使って、「Hello world」という内容のダイアログボックスを作ることができるのです。

ダイアログの表示/非表示の制御も簡単で、表示する場合はopen属性を追加し、非表示にする場合はopen属性を削除します。もちろん、DOM インターフェイス (show(), close()) を使用してダイアログの表示/非表示を制御することもできます。

ダイアログの下のマスク層には ::backgrop 疑似要素を使用でき、その活性化には DOM API の showModal() を使用する必要があります。backgropの性質は、ダイアログの下に位置し、どのz-indexよりも上にあることです。

showModal()を使うとマスクレイヤーだけでなくダイアログコンテナも表示されるので、 ::backdrop を使う場合は show() の代わりに showModal() を使ってください。ESCキーを押すとポップアップレイヤーは閉じますが、DOM APIとして close() も使うことができます。

次のコードで、::backdrop レイヤーを半透明のレイヤーに設定することができます。

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

メッセージを表示するための一般的なポップアップレイヤーに加え、より使用頻度の高いカテゴリーとして、フォームを持つポップアップレイヤーがあります。

フォーム付きポップアップレイヤー

HTML5のdialog要素とform要素を組み合わせて、このようなポップアップレイヤーを作ることは可能でしょうか？

回答：はい

form要素とdialog要素を緊密に連携させるためには、どうしたらよいでしょうか。

A: dialog要素にmethod="dialog"という属性を追加して、button要素の属性値をdialog要素に渡せるようにすればいいんです。

<dialog>
  <form method="dialog">
    <p>OK or Cancel</p>
    <button type="submit" value="yes">OK</button>
    <button type="submit" value="no">cancel</button>
  </form>
</dialog>

<script>
    var dialog = document.querySelector('dialog')
    dialog.showModal()
    dialog.addEventListener('close', function(event) {
        console.log(dialog.returnValue)
    })
</script>

デモ

ブラウザの互換性

HTML5を比較的うまく使っていますが、互換性の問題があり、chromeやoperaは対応が良いですが、Firefoxは実験的な機能ですが、IE、Edge、safariの対応は良くありません。また、iosは対応しておらず、Androidも対応が不十分で、Android6以降の対応のみです。具体的な参考資料 カニース

では、古いブラウザでもHTML5ダイアログに対応させることはできるのでしょうか？まず思いつくのは、es6の新機能に対応したbabel-polyfillのように、ダイアログに対応したpolyfillがあるかどうかですが、実際にそのようなオープンソースプロジェクトが存在するようです A11Y ダイアログ で、それぞれvueとreactの異なるバージョンを提供しています。

以上が今回の内容の全てですが、皆様の学習の一助となり、スクリプトハウスをより支持していただけると幸いです。