CSS - 偽類 :modal

CSS 偽類選擇器:modal 匹配或目標處於一種狀態的元素，在這種狀態下，它不會與外部元素進行任何互動，直到該互動被關閉。

偽類:modal 可以選擇多個元素，但只有一個元素會處於活動狀態並接收輸入。

可以使用:modal 偽類選擇的元素可以是以下一個或多個：

可以使用showModal API 開啟的<dialog> 元素。
可以使用requestFullscreen API 開啟的，被:fullscreen 偽類選擇的元素。

語法

:modal {
   /* ... */ 
}

CSS :modal 示例

這是一個:modal 偽類的示例

<html>
<head>
<style>
   ::backdrop {
      background-image: url(images/border.png);
   }

   :modal {
      border: 8px inset blue;
      background-color: lightpink;
      box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
   }
</style>
</head>
<body>
   <dialog>
      <button autofocus>Close</button>
      <p>The modal dialog has a beautiful backdrop!</p>
      <p>And see my styling using :modal pseudo-class</p>
   </dialog>
   <button>Open the dialog</button>

   <script>
      const dialog = document.querySelector("dialog");
      const showButton = document.querySelector("dialog + button");
      const closeButton = document.querySelector("dialog button");

      // "Show the dialog" button opens the dialog modally
      showButton.addEventListener("click", () => {
      dialog.showModal();
      });

      // "Close" button closes the dialog
      closeButton.addEventListener("click", () => {
      dialog.close();
      });
   </script>
</body>
</html>

在上面的示例中

我們添加了一個開啟帶有對話方塊的模態框的按鈕。
我們使用::backdrop 偽元素添加了一個背景。
:modal 偽類用於設定對話方塊的樣式。

列印頁面