Mod
JavaScript APIs

Dialog

The JavaScript API for the Dialog component.

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

Method API

// Using mod(-plus).iife.min.js
window.mod.dialog(dialog_id: string, options: object) => Promise(boolean);

// Using mod(-plus).esm.min.js
import { dialog } from 'path/to/mod(-plus).esm.min.js';
dialog(dialog_id: string, options: object) => Promise(boolean);

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.

Dialog HTML

<div data-mod-dialog="confirm_delete" class="mod-dialog">
  <div class="mod-dialog-body">
    <div class="mod-dialog-icon">
      <i class="mod-icon-triangle-alert mod-text-warning"></i>
    </div>
    <div class="mod-dialog-content">
      <p class="mod-dialog-title">Confirm Deletion</p>
      <p class="mod-dialog-subtitle">Are you sure? This will permanently delete the file.</p>
    </div>
    <div class="mod-dialog-actions">
      <button data-mod-dialog-no class="mod-button">Cancel</button>
      <button data-mod-dialog-yes class="mod-button mod-button-danger">Yes, Delete</button>
    </div>
  </div>
</div>

Note: in order for the dialog to work, HTML must include a click target with either a data-mod-dialog-no or data-mod-dialog-yes attribute.

Dialog JavaScript

const should_delete = await window.mod.dialog('confirm_delete');

if (should_delete) {
  // Handle deletion...
}

Dialog with Event Callbacks

const should_delete = await window.mod.dialog('confirm_delete', {
  events: {
    on_confirm: () => {
      console.log('User confirmed the action');
    },
    on_cancel: () => {
      console.log('User canceled the action');
    }
  }
});

if (should_delete) {
  // Handle deletion...
}

API

dialog_id string required
A string matching the value of a dialog element's data-mod-dialog attribute to target.
options object
Configuration options for the dialog.
events object
Event callbacks for dialog actions.
on_confirm function
Callback function when the dialog is confirmed (Yes button clicked). Receives no parameters.
on_cancel function
Callback function when the dialog is canceled (No button clicked). Receives no parameters.