HTML 對話方塊元素的一些 CSS 技巧

最近我一直在嘗試使用HTML <dialog> 元素。它對於無需大量JavaScript的原生對話框非常方便。

如果您想快速查看其運行效果，可以訪問我的遊戲Jumblie，然後點擊頂部的設定齒輪按鈕。

好了！在網站上實現您自己的<dialog>時，您可能會發現以下幾個技巧非常有用！

模糊<dialog>背景

::backdrop CSS偽元素不只限於<dialog>。您可以隨意設定其樣式，但如果您想保持簡單，可以添加如下所示的模糊濾鏡，以稍微模糊背景：

<code>dialog::backdrop {
  backdrop-filter: blur(2px);
}</code>

當然，您也可以新增其他屬性，例如background-color。如果您想更深入地了解此內容，我還寫過一篇關於使用JavaScript設定偽元素樣式的文章！

<dialog>開啟時停用頁面捲動

這是一個很酷的特殊選擇器。當<dialog>開啟時，它會在標籤上新增一個open屬性。

<code>body:has(dialog[open]) {
  overflow: hidden;
}</code>

此選擇器檢查body是否包含具有open屬性的<dialog>。如果是，則禁用頁面滾動！當然，奇怪的是，如果您的對話框很高，您可能需要分別在其中啟用滾動，但這可以防止在滾動時對話框後面的頁面四處移動。

就是這樣！希望這對您有所幫助！

以上是HTML 對話方塊元素的一些 CSS 技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！