Site header

Modal

Modal

Style Guide

Rendered Modal surfaces and their document runtime state.

Kind

Rendered Content

Documentation

Modal

Root

qp-modal

Root rendered Modal surface.

Children

qp-modal__backdrop

Modal backdrop and outside-click dismissal surface.

qp-modal__close

Control that closes the Modal.

qp-modal__panel

Modal dialog panel.

qp-modal__title

Modal heading referenced by the dialog accessible name.

Runtime

qp-modal-open

Applied dynamically to the document root while a Modal is open.
  • Kind: runtime
  • Trigger: A Modal opens.
  • Target: html
  • Lifecycle: Added when the Modal opens and removed when it closes.
  • Purpose: Enables document-level Modal presentation and scroll locking.

Example

Rendered HTML

<div class="qp-modal" id="qpm-help" hidden aria-hidden="true" data-qp-modal-escape="true" data-qp-modal-backdrop="true" data-qp-modal-initial-focus="close"> <div class="qp-modal__backdrop" data-qp-modal-close="1"></div> <div class="qp-modal__panel" role="dialog" aria-modal="true" aria-labelledby="qpm-help-title" tabindex="-1"> <button class="qp-modal__close" type="button" aria-label="Close" data-qp-modal-close="1">×</button> <h2 id="qpm-help-title" class="qp-modal__title">Help</h2> <section id="qpm-help-content" class="qp-section qp-section--width-default qp-section--appearance-transparent"> <div class="qp-section__header"> <h2 class="qp-section__title qp-sr-only">Help details</h2> </div> <div class="qp-section__body"> <p class="qp-paragraph qp-paragraph--left">Use any normal QP content inside a Modal.</p> </div> </section> </div> </div>

Preview