JavaScript APIs

Modal

The JavaScript API for the Modal component.

The mod.modal() method automatically attaches event listeners for a <div data-mod-modal="example" class="mod-modal"></div> tag by targeting its data-mod-modal attribute and handles interaction events for the element.

Method API

// Using mod(-plus).iife.min.js
window.mod.modal(modal_id: string) => object;

// Using mod(-plus).esm.min.js
import { modal } from 'path/to/mod(-plus).esm.min.js';
modal(modal_id: string) => object;

Usage Examples

Use the following usage examples to guide your implementation.

Examples Use Global JavaScript

For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.

Modal HTML

<div data-mod-modal="example" class="mod-modal">
  <div class="mod-modal-body">
    <header class="mod-modal-header">
      <p class="mod-modal-title">Create a New Project</p>
      <i data-mod-modal-close class="mod-icon-x"></i>
    </header>
    <div class="mod-modal-content">
      <label class="mod-input-label">Project Name</label>
      <input type="text" class="mod-input" placeholder="demo.cheatcode.co" />
    </div>
    <footer class="mod-modal-actions">
      <button data-mod-modal-close class="mod-button">Cancel</button>
      <button class="mod-button mod-button-brand">Create Project</button>
    </footer>
  </div>
</div>

Note: in order for the automatic modal closing to work, HTML must include a click target with a data-mod-modal-close attribute.

Modal JavaScript

const modal = window.mod.modal('example');

modal.open();

// NOTE: Only necessary if you're trying to close the modal outside of itself.
// Mod automatically provides a close mechanism in the modal.
modal.close();

API

modal_id string required: A string matching the value of a modal element's data-mod-modal attribute to target.