:modal CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :modal pseudo-class in CSS is used to select elements that are currently being presented as a modal dialog to the user. Modals are interactive elements that temporarily block interaction with the rest of the page, typically to capture user input, confirm actions, or display important information. Unlike general elements that are always part of the page flow, elements targeted by :modal gain a special contextual significance while they are active, which makes this pseudo-class particularly useful for applying specific styles to visible modals without relying on classes or IDs.

A key aspect of :modal is its ability to work with native HTML elements like dialog, which can be displayed as modals using the open attribute. When a dialog element is active as a modal, it automatically matches the :modal pseudo-class, allowing developers to style it differently from non-modal content. This can include adjusting z-index for layering, applying background-color changes for emphasis, or using box-shadow to visually separate it from the underlying page content.

Using :modal can help simplify modal styling by reducing reliance on JavaScript-added classes. For example, instead of toggling a “modal-active” class on a dialog, you can directly write:

<dialog id="myDialog">This is a modal dialog.</dialog>

dialog:modal {
    border: 2px solid #007bff;
    padding: 1em;
    border-radius: 8px;
    background-color: #f0f8ff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

This ensures that the style is automatically applied only when the dialog is displayed as a modal, without additional scripting.

It is worth noting that :modal interacts with modal behavior defined by the HTML specification, which can affect focus and accessibility. Browsers may automatically trap focus within elements matching :modal and prevent interaction with background elements. Therefore, pairing :modal with proper focus management, transitions, or opacity animations can greatly enhance user experience while maintaining accessibility.

This pseudo-class provides a clean, declarative way to differentiate active modals from regular content and is particularly useful in modern UI patterns where multiple modal dialogs may appear conditionally.

Syntax

:modal {
  /* ... */
}

Example

HTML

<div class="container">

  <h1>CSS :modal Demo</h1>

  <button id="openBtn">Open Modal</button>

</div>



<dialog id="myDialog">

  <h2>I am a Modal</h2>

  <p>While I am open, the :modal pseudo-class is active.</p>

  <button id="closeBtn">Close</button>

</dialog>



<script>

const dialog = document.querySelector('#myDialog');

const openBtn = document.querySelector('#openBtn');

const closeBtn = document.querySelector('#closeBtn');



// This triggers the :modal pseudo-class

openBtn.addEventListener('click', () => {

  dialog.showModal();

});



// This removes the :modal state

closeBtn.addEventListener('click', () => {

  dialog.close();

});

</script>

CSS

/* Target the dialog only when it is in the modal state */

dialog:modal {

  border: 5px solid #3498db;

  border-radius: 12px;

  padding: 2rem;

  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);

  animation: slideIn 0.3s ease-out;

}



/* Styling the backdrop that appears behind the :modal element */

dialog:modal::backdrop {

  background-color: rgba(0, 0, 0, 0.7);

  backdrop-filter: blur(5px);

}



/* Simple animation for entry */

@keyframes slideIn {

  from {

    opacity: 0;

    transform: translateY(-20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :modal pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.