HTML 要素の探索: <ダイアログ>

デモ

導入

ダイアログ要素は、しばらくの間、すべてのブラウザーで広くサポートされてきました。ここでは、使用しているフレームワークに関係なく、この要素がコードの生産性と品質をどのように大幅に向上させることができるかを説明します。

美しくシンプルなコンポーネントを作成するのに多くのコード行は必要ないことを示すために、プレーンな JavaScript を使用しています。
この要素の使用は非常に簡単です:

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

上記のとおり、ダイアログ要素の参照を取得して、次の 2 つの関数のいずれかを呼び出すだけです。

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

しかし、あなたは次のように疑問に思うかもしれません:

これら 2 つの関数の違いは何ですか?

それを理解するには、レイヤーと最上位レイヤーとは何かについて少し理解する必要があります。

レイヤー

ドロワー コンポーネントを使用するときにこれまでに遭遇した可能性のあるものの例を示します。通常、HTML でコンポーネントを呼び出しますが、最終的には画面全体では開かず、配置したコンテキスト内でのみ開くことになります。そのため、ビューポート全体で開くか、埋めるには、引き出しをindex.html に配置する必要があります。位置と Z インデックスを指定した CSS を使用して、重複するコンテキストを作成します。

レイヤーを使用するとこれを簡単に行うことができますが、CSS ドキュメントを少し汚すことになります。 showModal() を使用すると、構成を必要とせずに、別のコンテキストですでに最上位層のダイアログ要素が開きます。 show() を使用すると、最上位レイヤーのダイアログは呼び出されず、ビューポートの通常の動作が可能になります。

最上位のレイヤーは、ビューポート全体に展開され、ユーザーまたは Web ブラウザーによって作成されたすべてのレイヤーをオーバーレイする「レイヤー」です。これは非常に役立ち、悪名高い過剰な支柱の穴あけを避けることができます。

わかった、わかった、でもこの要素をどのようにスタイル設定すればよいでしょうか?それはとても難しいでしょう！

全然違います！ div を中央に配置するのと同じくらい簡単です...おそらくもう少し!

ダイアログ/モーダル

さらに詳細な様式化については、Kevin Powell のこのビデオを参照することをお勧めします。

ダイアログのスタイルを設定するには、要素に ID/クラスを入力し、CSS を使用するだけです。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

上でわかるように、#dialog[open] を使用して要素の位置を変更しました。ダイアログを作成すると、デフォルトで表示が無効になります。

この属性は、2 つの関数のいずれかを呼び出した場合にのみ追加されます。
したがって、ダイアログ要素のスタイルを設定するときは、表示の問題を避けるために、常にクラス/ID の名前と属性を使用するようにしてください。
上で見られるように、ダイアログにはすでに ::backdrop 効果が備わっており、それを変更するのも非常に簡単です。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

ショー！超簡単！しかし、このモーダルを閉じるにはどうすればよいでしょうか?背景をクリックしても何も起こりません!

行きましょう！デフォルトでは、要素にはこの可能性はありません。モーダルを閉じたい場合は、内部ボタンなどを使用してモーダルを閉じる関数を呼び出す必要があります。

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

しかし、外側をクリックして閉じるこの効果を再現したい場合は、単純な関数を使用してダイアログ要素の端を識別し、外側をクリックしたかどうかを知ることができます。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

動作は次のようになります:

これを常に実行したい場合は、Popover API を参照することをお勧めします。

いやあ、それは醜いですね！私のライブラリはすでにアニメーション化されています!

心配しないでください。簡単なフェードイン アニメーションを追加してみましょう。

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

フェードアウト アニメーションの追加は、ユーザーがいつモーダルを閉じるかを識別する方法がないため、少し難しくなります。そのため、スクリプト ファイルを変更する必要があります。

dialog.close();

2 つの重要なことが行われました:

1. モーダルを閉じるアニメーションの長さを決定する新しいパラメータが追加されました (検索した結果、Kevin Powell によるこのビデオを見つけました)。

2. ユーザーがクリックしたときに閉じるという属性を追加しました。これは、上記の時間パラメータを使用して削除されます。
   

/** @type {HTMLDialogElement} */
const dialog = document.getElementById('dialog');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
 const closeByClickingOutside = (dialogRef) => {
  dialogRef.addEventListener('click', (ev) => {
    if (
      ev.offsetX < 0 ||
      ev.offsetX > ev.target.offsetWidth ||
      ev.offsetY < 0 ||
      ev.offsetY > ev.target.offsetHeight
    ) {
      dialogRef.close();
    }
  });
};

closeByClickingOutside(dialog);

これで、ライブラリなしの完全にアニメーション化されたダイアログが完成しました!

それはいいですね！しかし、この要素を使用して引き出しをどのように作成したのでしょうか?

これを実現するには、ダイアログ要素のデフォルトのスタイルを取得して上書きする必要があります...

引き出し

引き出しは画面の上の全高で開きます。それでは、新しい引き出し要素を最初から作成してみましょう。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

ドロワーを画面の最大の高さに設定するには、ダイアログのデフォルトの最大高さを上書きする必要があることに注意することが重要です!

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

あとは簡単です。ステップバイステップのダイアログで作成したのと同じ関数を使用してアニメーションを追加するだけで完了です。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

<p><img src="https://img.php.cn/upload/article/000/000/000/173086397449699.jpg" alt="EXPLORING HTML ELEMENTS: <DIALOG>"></p>

<h2>
  
  
  読んでいただきありがとうございます
</h2>

<p>これは私の初めての投稿です。読んでいただきありがとうございます。少しでも役に立ったなら、Linkedin でフォローすることをお勧めします。私の第一言語はポルトガル語なので、ほとんどの投稿はポルトガル語ですが、何か投稿しようとしています英語でも。今後も同様の内容を投稿するつもりです。このモーダルとドロワー戦略を改善する方法についての推奨事項があれば、そこに送っていただけます。</p>


          

            
        

以上がHTML 要素の探索: <ダイアログ>の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。