Modals

Basic Modal

Trigger a modal by opening it with data-lp-toggle="modal" and data-lp-target="#id". Close it with data-lp-dismiss="modal" or Esc.

<button data-lp-toggle="modal" data-lp-target="#md-basic">Open</button>

<div class="lp-modal" id="md-basic" data-lp-component="modal">
  <div class="lp-modal-dialog">
      <div class="lp-modal-header">
        <h5 class="lp-modal-title">Basic Modal</h5>
        <button class="lp-modal-close" data-lp-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="lp-modal-body"><p>Dialog body content.</p></div>
      <div class="lp-modal-footer">
        <button class="lp-btn lp-btn-secondary" data-lp-dismiss="modal">Close</button>
        <button class="lp-btn lp-btn-primary">Save</button>
      </div>
  </div>
</div>

Modal Sizes

Sizes: sm (380px), default (500px), lg (720px), xl (960px), and fullscreen. Apply the class on the .lp-modal root.

<!-- Size classes: lp-modal-sm | (default) | lp-modal-lg | lp-modal-xl | lp-modal-fullscreen -->
<div class="lp-modal lp-modal-sm" id="md-sm" data-lp-component="modal">
  <div class="lp-modal-dialog">
    …
  </div>
</div>

<div class="lp-modal lp-modal-lg" id="md-lg" data-lp-component="modal">…</div>
<div class="lp-modal lp-modal-xl" id="md-xl" data-lp-component="modal">…</div>
<div class="lp-modal lp-modal-fullscreen" id="md-full" data-lp-component="modal">…</div>

Modal Density

Control header / body / footer padding with a density class on the root. lp-modal-compact shrinks everything (and drops the title to text-sm); lp-modal-relaxed expands it.

<!-- Relaxed: more padding -->
<div class="lp-modal lp-modal-relaxed" id="md-relaxed" data-lp-component="modal">…</div>

<!-- Normal: default (no extra class) -->
<div class="lp-modal" id="md-normal" data-lp-component="modal">…</div>

<!-- Compact: minimal padding + smaller title -->
<div class="lp-modal lp-modal-compact" id="md-compact" data-lp-component="modal">…</div>

Centered and Scrollable

Add lp-modal-dialog-centered or lp-modal-dialog-scrollable to .lp-modal-dialog. They combine freely.

<div class="lp-modal" id="md-centered" data-lp-component="modal">
  <div class="lp-modal-dialog lp-modal-dialog-centered">…</div>
</div>

<div class="lp-modal" id="md-scrollable" data-lp-component="modal">
  <div class="lp-modal-dialog lp-modal-dialog-scrollable">…</div>
</div>

Static Backdrop

Set data-lp-backdrop="static" to block backdrop-click dismiss (a subtle bounce signals the intent). Pair with data-lp-keyboard="false" to also block Esc.

<div class="lp-modal" id="md-static" data-lp-component="modal"
     data-lp-backdrop="static" data-lp-keyboard="false">
  …
</div>

Contextual Modal Headers

Solid header lp-modal-{color} or soft header lp-modal-{color}-light on the root. Supported colors: primary, success, danger, warning, info, dark.

Solid headers

Soft (light) headers

<!-- Solid header -->
<div class="lp-modal lp-modal-danger" id="md-solid-danger" data-lp-component="modal">…</div>

<!-- Soft header -->
<div class="lp-modal lp-modal-success-light" id="md-soft-success" data-lp-component="modal">…</div>

Alert Modals — Modal.alert()

Promise-based alert dialog with a centered icon. Resolves when dismissed.

await Modal.alert({
  title: "Saved",
  message: "Your changes were saved.",
  variant: "success",       // info | success | warning | danger | primary
  okLabel: "Got it",
});

Confirmation Dialogs — Modal.confirm()

Promise-based confirm dialog. Resolves true on OK, false on Cancel / backdrop / Esc.

Result log:

const ok = await Modal.confirm({
  title: "Delete item?",
  message: "This cannot be undone.",
  variant: "danger",
  okLabel: "Delete",
  cancelLabel: "Keep",
});
if (ok) deleteItem();

Programmatic Control & Dynamic Content

Get or create a modal instance and mutate its contents at runtime — useful for shared dialogs that change purpose between opens.

const modal = Modal.getOrCreateInstance("#md-shell");

modal.setTitle("Updated title");
modal.setContent("<p>New body markup.</p>");
modal.addButton("OK", {
  variant: "primary",
  dismiss: true,           // auto-close on click
  name: "ok",              // retrievable via getButton("ok")
  onClick: (e) => console.log("OK clicked"),
});
modal.clearButtons();
modal.show();

Form in a Modal

Forms inside modals focus-trap naturally. Wire submit via the footer’s primary button.

<div class="lp-modal" id="md-form" data-lp-component="modal">
  <div class="lp-modal-dialog lp-modal-dialog-centered">
      <div class="lp-modal-header">
        <h5 class="lp-modal-title">New project</h5>
        <button class="lp-modal-close" data-lp-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="my-form">
        <div class="lp-modal-body">
          <div class="lp-form-group lp-mb-3">
            <label class="lp-form-label" for="proj-name">Name</label>
            <input id="proj-name" class="lp-form-control" required>
          </div>
          <div class="lp-form-group">
            <label class="lp-form-label" for="proj-desc">Description</label>
            <textarea id="proj-desc" class="lp-form-control" rows="3"></textarea>
          </div>
        </div>
        <div class="lp-modal-footer">
          <button type="button" class="lp-btn lp-btn-secondary" data-lp-dismiss="modal">Cancel</button>
          <button type="submit" class="lp-btn lp-btn-primary">Create</button>
        </div>
      </form>
  </div>
</div>

Nested / Stacked Modals

Modals stack automatically. Each additional modal gets a higher z-index (+10) and its own backdrop. Esc closes only the topmost one.

<div class="lp-modal" id="md-parent" data-lp-component="modal">
  <div class="lp-modal-dialog lp-modal-dialog-centered">
      <div class="lp-modal-body">
        <button data-lp-toggle="modal" data-lp-target="#md-child">Open child</button>
      </div>
  </div>
</div>

<div class="lp-modal" id="md-child" data-lp-component="modal">…</div>

Mobile Fullscreen

Use lp-modal-fullscreen-{bp}-down to make the modal fullscreen below a breakpoint. Supported: sm (576px), md (768px), lg (992px), xl (1200px), 2xl (1400px). Resize the window below 768px and re-open.

<div class="lp-modal lp-modal-fullscreen-md-down" id="md-mobile-fs" data-lp-component="modal">
  <div class="lp-modal-dialog">
    …
  </div>
</div>

JavaScript API

Full reference for the Modal class exposed on window.Launchpad.Modal.

Event log:

// --- Instance helpers (Bootstrap 5 parity) ---
const modal = Modal.getOrCreateInstance("#myModal");
Modal.getInstance("#myModal");      // → existing instance or null

// --- Lifecycle ---
modal.show();
modal.hide();
modal.toggle();
modal.destroy();

// --- Dynamic content API ---
modal.setTitle("Edit user");
modal.setContent("<p>…</p>");
modal.addButton("OK", { variant: "primary", dismiss: true, name: "ok", onClick });
modal.clearButtons();
modal.getButton("ok");              // by name or numeric index

// --- Promise factories ---
await Modal.alert({ title, message, variant, okLabel });
const ok = await Modal.confirm({ title, message, variant, okLabel, cancelLabel });

// --- Events (bubbling, preventable on show/hide) ---
el.addEventListener("lp:modal:show",   (e) => {});
el.addEventListener("lp:modal:shown",  (e) => {});
el.addEventListener("lp:modal:hide",   (e) => {});
el.addEventListener("lp:modal:hidden", (e) => {});

// e.detail carries { instance } and { relatedTarget } for data-attribute triggers
// Cancel opening:
el.addEventListener("lp:modal:show", (e) => { if (!userOk) e.preventDefault(); });

CSS / Data Reference

Class / Attribute	Description
`.lp-modal`	Root overlay container (fixed, full-viewport)
`.lp-modal-dialog`	The visible card — background, radius, shadow, stacking for header / body / footer. (Legacy `.lp-modal-content` markup still works as a transparent passthrough.)
`.lp-modal-header / -title / -close`	Header parts
`.lp-modal-body`	Body region
`.lp-modal-footer`	Footer buttons
`.lp-modal-sm / -lg / -xl / -fullscreen`	Size: 380 / 500 (default) / 720 / 960 / 100vw
`.lp-modal-fullscreen-{sm\|md\|lg\|xl\|2xl}-down`	Fullscreen below a breakpoint
`.lp-modal-compact / -relaxed`	Density — smaller or larger paddings
`.lp-modal-dialog-centered`	Vertically center (on `.lp-modal-dialog`)
`.lp-modal-dialog-scrollable`	Scrollable body (on `.lp-modal-dialog`)
`.lp-modal-{color}`	Solid header: primary, success, danger, warning, info, dark
`.lp-modal-{color}-light`	Soft / pastel header
`data-lp-toggle="modal"`	Trigger — opens the modal in `data-lp-target`
`data-lp-target="#id"`	Selector of the modal to open
`data-lp-dismiss="modal"`	Close button (inside or outside the modal)
`data-lp-backdrop="true \| false \| static"`	Backdrop mode
`data-lp-keyboard="true \| false"`	Esc-key dismiss
`data-lp-focus="true \| false"`	Focus trap on show
`data-lp-size`	sm \| default \| lg \| xl \| fullscreen
`data-lp-centered` / `data-lp-scrollable`	Dialog-level options (additive with markup classes)
`lp:modal:show / shown / hide / hidden`	Lifecycle events (bubble; show/hide are preventable)

Basic Modal

Modal Sizes

Modal Density

Centered and Scrollable

Static Backdrop

Contextual Modal Headers

Solid headers

Soft (light) headers

Alert Modals — Modal.alert()

Confirmation Dialogs — Modal.confirm()

Programmatic Control & Dynamic Content

Form in a Modal

Nested / Stacked Modals

Mobile Fullscreen

JavaScript API

CSS / Data Reference

Basic Modal

Small modal

Default modal

Large modal

Extra large modal

Fullscreen modal

Relaxed

Normal (default)

Compact

Centered

Scrollable body

Centered + scrollable

Confirm before closing

Primary header

Success header

Danger header

Warning header

Info header

Dark header

Primary light header

Success light header

Danger light header

Warning light header

Info light header

Dynamic shell

New project

Parent modal

Child modal

Fullscreen under 768px

Lifecycle demo