CSS 伪类

CSS 伪类 :modal 匹配或定位处于不与其外部元素进行任何交互的状态的元素，直到该交互被解除。

伪类 :modal 可以选择多个元素，但只有一个元素会处于活动状态并接收输入。

:modal 伪类可以选择的元素是以下一项或多项:

  • <dialog> 元素，可以使用 showModal API 打开。

  • 由 :fullscreen 伪类选择的元素，可以打开通过 requestFullscreen API。

语法

: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>关闭</button>
      <p>模式对话框有一个好看的背景</p>
    <p>并使用 :modal 伪类查看我的样式</p>
   </dialog>
   <button>打开看看效果</button>

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

      //"显示对话框"按钮以模态方式打开对话框
      showButton.addEventListener("click", () => {
      dialog.showModal();
      });

      //"关闭"按钮关闭对话框
      closeButton.addEventListener("click", () => {
      dialog.close();
      });
   </script>
</body>
</html>

在上面的示例中:

  • 我们添加了一个按钮，用于打开带有对话框的模式。

  • 我们使用 ::backdrop 伪元素添加了背景。

  • :模态伪类用于设置对话框的样式。