CSS - Pseudo-class :modal

The CSS pseudo-class selector :modal matches or targets an element in a state in which it does not make any interaction with the elements outside it, until that interaction has been dismissed.

The pseudo-class :modal can select multiple elements, but only one of the elements will be active and receives input.

The elements that can be selected by the :modal pseudo-class are one or many of the following:

  • <dialog> element that can be opened using the showModal API.

  • Element selected by the :fullscreen pseudo-class, that can be opened by the requestFullscreen API.

Syntax

:modal {
   /* ... */ 
}

CSS :modal Example

Here is an example of :modal pseudo-class:

<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>

In the above example:

  • We have added a button that opens a modal with a dialog.

  • We have added a backdrop Using ::backdrop pseudo-element,.

  • :modal pseudo-class is used to style the dialog box.

Advertisements