Modal

Modal dialogs and offcanvas slide-in panels using the native <dialog> element. Part of the @thenewcss/modal addon package.

Uses the native <dialog> element which provides built-in backdrop, focus trap, and Escape key support. Open with element.showModal() and close with element.close().

Installation

npm install @thenewcss/modal

Basic Modal

A centered dialog with header, body, and footer sections. Use showModal() to open with backdrop.

<dialog class="modal" id="myModal">
  <div class="modal-header">
    <h2 class="modal-title">Modal Title</h2>
    <button class="btn-close" onclick="this.closest('dialog').close()"></button>
  </div>
  <div class="modal-body">
    <p>Modal body content goes here.</p>
  </div>
  <div class="modal-footer">
    <button onclick="this.closest('dialog').close()">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</dialog>

<button onclick="document.getElementById('myModal').showModal()">
  Open Modal
</button>

Modal Sizes

Add a size modifier class to the .modal for different widths.

<dialog class="modal modal-sm">...</dialog>  <!-- max-width: 300px -->
<dialog class="modal">...</dialog>           <!-- max-width: 500px (default) -->
<dialog class="modal modal-lg">...</dialog>  <!-- max-width: 800px -->
<dialog class="modal modal-xl">...</dialog>  <!-- max-width: 1140px -->
<dialog class="modal modal-fullscreen">...</dialog>  <!-- full viewport -->

Offcanvas

A slide-in panel from the left or right edge. Also uses the <dialog> element.

<!-- Left sidebar -->
<dialog class="offcanvas offcanvas-start" id="sidebar">
  <div class="offcanvas-header">
    <h3>Sidebar</h3>
    <button class="btn-close" onclick="this.closest('dialog').close()"></button>
  </div>
  <div class="offcanvas-body">
    <p>Offcanvas content here.</p>
  </div>
</dialog>

<!-- Right panel -->
<dialog class="offcanvas offcanvas-end" id="panel">
  <div class="offcanvas-header">
    <h3>Panel</h3>
    <button class="btn-close" onclick="this.closest('dialog').close()"></button>
  </div>
  <div class="offcanvas-body">
    <p>Panel content here.</p>
  </div>
</dialog>

<button onclick="document.getElementById('sidebar').showModal()">Open Sidebar</button>
<button onclick="document.getElementById('panel').showModal()">Open Panel</button>

Class Reference

Modal

Class	Description
`.modal`	Applied to dialog element. Centered with backdrop, max-width 500px.
`.modal-header`	Flex header with space-between alignment and bottom border.
`.modal-title`	Modal heading with semibold weight.
`.modal-body`	Scrollable content area with padding.
`.modal-footer`	Flex footer with end-aligned actions and top border.
`.modal-sm`	Small modal, max-width 300px.
`.modal-lg`	Large modal, max-width 800px.
`.modal-xl`	Extra large modal, max-width 1140px.
`.modal-fullscreen`	Full viewport modal with no border-radius.

Offcanvas

Class	Description
`.offcanvas`	Applied to dialog element. Fixed position slide-in panel, 300px wide.
`.offcanvas-start`	Slides in from the left edge.
`.offcanvas-end`	Slides in from the right edge.
`.offcanvas-header`	Flex header with space-between alignment.
`.offcanvas-body`	Scrollable content area with flex-grow.