探索 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());

如上所示，您只需取得對話方塊元素的參考並呼叫以下兩個函數之一：

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

但是您可能想知道：

這兩個函數有什麼差別？

嗯，要理解這一點，我們必須了解一些關於層以及頂層是什麼的知識。

層數

讓我舉一個你以前在使用抽屜組件時可能遇到的例子。您通常在html 中呼叫該元件，但它最終不會在整個螢幕上打開，只能在您放置它的上下文中打開，因此您最終必須將抽屜放在index.html 中才能在整個視窗中打開或填滿你的css 帶有位置和z-index 來創造重疊的上下文。

透過使用圖層，你可以讓這件事變得更容易，但你最終也會污染你的 css 文件。透過使用 showModal()，它可以使用單獨的上下文在頂層開啟對話方塊元素，無需任何配置。如果您使用 show()，它不會呼叫頂層中的對話框，並且您可以擁有視口的正常行為。

頂層是一個“圖層”，它擴展到整個視窗並覆蓋您或您的網頁瀏覽器所建立的所有圖層。它有很大幫助，並避免了臭名昭著的過度鑽探。

好吧好吧，但是我該如何設計這個元素的樣式呢？一定很難吧！

一點也不！就像將 div 居中一樣簡單...也許更多一點！

對話框/模態框

要了解更深入的風格化，我建議您觀看 Kevin Powell 的這段影片。

要設定對話框樣式很簡單，只需將 id/class 放入元素中並使用 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]來修改元素的位置。當您建立對話方塊時，預設會停用顯示。

僅當您呼叫這兩個函數之一時才會新增此屬性。
因此，在設計任何對話方塊元素的樣式時，請務必嘗試使用類別/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();

完成了兩件重要的事情：

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中文網其他相關文章！