SyntaxShelf

Modal

2 snippets across 2 stacks — HTML & CSS, React

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.

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.

Browse all tasks by intent