対話要素:モデルとポップアップへの新しいアプローチ

おい、人々!
最近では、ダイアログHTML要素は、すべての近代的なブラウザエンジンで安定し、あなたのプロジェクトで今すぐ安全に使用することができます.
あなたが求めるこの要素についてとても興味深いものは何ですか?
これは簡単にほんの数分であなたのWebアプリケーションのためのmodals/ポップアップを作成するために使用することができます、この要素はそれの行動を制御するために使用できるいくつかのメソッドを公開し、完全にカスタマイズ可能です.
これは反応のポータルに大きな代替手段として使用することができます.
最初にバニラJSユースケースを見て、カスタムコンポーネントを使用して1つを反応させます.
飛び込みましょう!

HTML要素

要素は、次のようにダイアログタグを使用して追加できます

 <dialog open>
   <p>Dialog Content</p>
 </dialog>

open属性はダイアログがデフォルトで表示されることを示します.私たちはすべての種類のUIを内部に追加することができます.

方法

この要素には3つのメソッドがあります.

close() - ダイアログを閉じる

show() - ダイアログが表示されます(背景UI要素、ボタンなどの入力、その他のインターフェイスは、ポップアップに使用できます).

showModal() - 他のUI要素の上にダイアログを表示します(他のオープンダイアログでも)いくつかのバックグラウンドオーバーレイで画面上に表示されます(最も高いZ - indexを持つように考えてください.

後の2つの機能の違いです.

Note, this example contains default browser dialog without any stylings

イベント

この要素は、現在の状態に基づいて2つのイベントを発行します.

close - これは、ユーザーがブラウザをダイアログを閉じるように指示するときにトリガされますEsc キー.

cancel - ダイアログが閉じられたときに発生します.前のケースでも適用可能であるのでclose .

両方のこれらのイベントも、彼らの機能選択肢を通して利用できますonclose and oncancel それぞれ.
コンソールを開き、ダイアログを閉じてみてくださいX それからEsc キー.

返り値

ダイアログ要素のこのプロパティを使用して、ダイアログを閉じるボタン値を検出できます.これは

がある<form /> 属性を持つ内部ダイアログmethod 設定する"dialog" . フォームを自動的に閉じるとダイアログが閉じます.この場合、returnValue ボタンの値を送信するように設定されています.

  <form method="dialog" />

手動で閉じた場合、ダイアログボックスの引数として文字列を渡します

  dialog.close('This string will be assigned to returnValue');

我々がこれまでに経験したすべてを使用している完全なフォーム対話.

Note, that we are only updating the details if the form was submitted, not if user closed the dialog manually. This is detected based on the returnValue property value of the dialog.

オーバレイカスタマイズ

ダイアログの背景オーバーレイをカスタマイズすることができます::backdrop 擬似要素、背景プロパティを設定する必要があり、オーバーレイに反映されます.

ダイアログコンポーネント

次のようにして渡されるスタイルをさらにカスタマイズすることができます対話要素の反応コンポーネントのバージョンですclassName プロップとコンテンツの要件として子供として.
これは、この1つの人々のためだ!
何か質問や提案がある場合は、私に手を伸ばす無料!
接続してください.Github