Overlay

3 snippets across 2 stacks — HTML & CSS, React

HCHTML & CSS

<dialog> Modal

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.

Inset Shorthand

HC · Layout & Positioning

syntax

inset: top right bottom left;
inset: all;

example

/* Fill entire parent */
.overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
}

/* 20px from each edge */
.inset-box {
  position: absolute;
  inset: 20px;
}

Note inset is shorthand for top, right, bottom, and left. inset: 0 is equivalent to top: 0; right: 0; bottom: 0; left: 0. It follows the same clockwise shorthand pattern as margin and padding.

REReact

Portals

RE · Patterns

syntax

import { createPortal } from 'react-dom';
createPortal(children, domNode);

example

import { createPortal } from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button className="close-btn" onClick={onClose}>X</button>
        {children}
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

// Usage
function App() {
  const [showModal, setShowModal] = useState(false);
  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open</button>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <h2>Modal Title</h2>
        <p>Modal body content here.</p>
      </Modal>
    </div>
  );
}

Note Portals render children into a different DOM node outside the parent hierarchy, but events still bubble through the React tree (not the DOM tree). Perfect for modals, tooltips, and dropdowns that need to escape overflow:hidden or z-index contexts.