How does HTML & CSS handle popup?

HTML & CSS covers this with 2 copy-ready snippets on this page. The " Modal" snippet in HTML & CSS uses ` `.

Which code does the HTML & CSS example use?

The " Modal" snippet uses ` `, from the Semantic Elements section of the HTML & CSS cheat sheet.

What other HTML & CSS snippets are shown for "popup"?

Besides " Modal", this page also shows "Popover API (HTML + CSS)".

Popup

2 snippets in HTML & CSS

HCHTML & CSS

<dialog> Modal

HC · Semantic Elements

Syntax

<dialog id="myDialog">
  Content
  <button>Close</button>
</dialog>

Example

<dialog id="confirmDialog">
  <h2>Confirm Deletion</h2>
  <p>This will permanently remove the item. Continue?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<!-- Open with: document.getElementById('confirmDialog').showModal() -->

Note Use showModal() to open with a backdrop that traps focus (accessible). Use show() for a non-modal popup. The form method="dialog" approach closes the dialog and sets its returnValue to the button's value.

Popover API (HTML + CSS)

HC · Modern CSS

Syntax

<button popovertarget="id">Toggle</button>
<div id="id" popover>Content</div>

Example

<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>
  <nav>
    <a href="/settings">Settings</a>
    <a href="/profile">Profile</a>
    <a href="/logout">Log Out</a>
  </nav>
</div>

<style>
[popover] {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

[popover]::backdrop {
  background: rgb(0 0 0 / 0.1);
}
</style>

Note The popover attribute creates a top-layer element that dismisses on outside click or Escape key, with no JavaScript required. It handles focus trapping and accessibility automatically. Style the ::backdrop pseudo-element for the overlay behind it.

Frequently asked questions

How does HTML & CSS handle popup?: HTML & CSS covers this with 2 copy-ready snippets on this page. The "<dialog> Modal" snippet in HTML & CSS uses `<dialog id="myDialog">`.
Which code does the HTML & CSS example use?: The "<dialog> Modal" snippet uses `<dialog id="myDialog">`, from the Semantic Elements section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "popup"?: Besides "<dialog> Modal", this page also shows "Popover API (HTML + CSS)".
Is there anything to watch out for?: Yes. For "<dialog> Modal": Use showModal() to open with a backdrop that traps focus (accessible). Use show() for a non-modal popup. The form method="dialog" approach closes the dialog and sets its returnValue to the button's value.