Unigrid

CSS Framework

Modal

Dialog overlays with backdrop, close button, and body scroll lock. Sizes from small confirmation dialogs to fullscreen panels.

Default Modal

Default Modal

This is a default modal dialog. Click the backdrop, the × button, or press Escape to close.

HTML structure

Title

Content here...

<button data-ug-modal-open="my-modal">Open Modal</button>

<div class="ug-modal" id="my-modal">
  <div class="ug-modal__backdrop" data-ug-modal-close></div>
  <div class="ug-modal__dialog">
    <div class="ug-modal__header">
      <h3 class="ug-modal__title">Title</h3>
      <button class="ug-modal__close" data-ug-modal-close>&times;</button>
    </div>
    <div class="ug-modal__body">
      <p>Content here...</p>
    </div>
    <div class="ug-modal__footer">
      <button class="ug-btn ug-btn--ghost" data-ug-modal-close>Cancel</button>
      <button class="ug-btn">Save</button>
    </div>
  </div>
</div>

Sizes

Small Modal

Compact dialog for quick actions (max-width: 24rem).

Large Modal

Wider dialog for complex content (max-width: 56rem).

Left Column

Grid layout inside a modal.

Right Column

Side-by-side content.

ModifierMax Width
--sm24rem
(default)40rem
--lg56rem
--fullFullscreen

Centered

Add --centered to vertically center the dialog.

Centered

Vertically centered in the viewport.

Confirm Dialog

Delete Item?

This action cannot be undone. Are you sure?

JavaScript

Include unigrid.min.js (or modal.js individually). Interactions:

  • data-ug-modal-open="id" — opens the modal with matching ID
  • data-ug-modal-close — closes the closest modal (on backdrop, close button, or any button)
  • Escape key closes all modals
  • Body scroll is locked while a modal is open

Class Reference

Class Description
.ug-modal Modal wrapper (hidden by default)
.ug-modal--open Show modal (toggled by JS)
.ug-modal__backdrop Semi-transparent overlay
.ug-modal__dialog Dialog container
.ug-modal__header Header with title + close
.ug-modal__title Dialog title
.ug-modal__close Close button
.ug-modal__body Content area
.ug-modal__footer Footer with action buttons
.ug-modal--sm Small (24rem)
.ug-modal--lg Large (56rem)
.ug-modal--full Fullscreen
.ug-modal--centered Vertically centered
data-ug-modal-open="id" Open trigger
data-ug-modal-close Close trigger