Logo

Documentation v4.0.0

  • Home
  • Components
  • Modal
Light
Dark
System

Overview

Modal is an abstract base class for creating Bootstrap modals with lifecycle hooks. Extend this class and implement init(), render(), and afterRender() methods. Call show() to open the modal and hide() to close it with an optional response value.

Import

import {components} from 'metronic-extension';
const {Modal} = components;

Lifecycle Hooks

Implement these methods in your subclass:
Hook Return Description
init(...params) Promise<void> | void Called before the modal is shown. Use for data fetching and initialization.
render(...params) Promise<string> | string Returns the modal's HTML content.
afterShown() void Called after the modal is fully shown (after CSS transitions).
afterHidden() void Called after the modal is fully hidden.

Methods

Method Return Description
show(...params) Promise<any> Opens the modal. Parameters are passed to lifecycle hooks. Returns a response when the modal is closed.
hide(response?) void Closes the modal. Optional response value is returned by show().
isShowing() boolean Returns true if the modal is currently shown.

Basic Example

A simple modal that receives a title parameter and displays it. Click the button to open the modal.
import {components} from 'metronic-extension';
const {Modal} = components;

class HelloModal extends Modal {
  init(title) {}

  render(title) {
    return `
      <div class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">${title}</h5>
              <div class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal">
                <i class="ki-duotone ki-cross fs-1"><i class="path1"></i><i class="path2"></i></i>
              </div>
            </div>
            <div class="modal-body">
              <p>Hello from the modal!</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>`;
  }
}

const modal = new HelloModal();
document.querySelector('#openBtn').addEventListener('click', async () => {
  await modal.show('My Modal Title');
  console.log('Modal closed');
});

Response Example

A modal that returns a response value when closed. The caller can await show() and inspect the result.
import {components} from 'metronic-extension';
const {Modal} = components;

class ConfirmModal extends Modal {
  init(message) {}

  render(message) {
    return `
      <div class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Confirm</h5>
              <div class="btn btn-icon btn-sm btn-active-light-primary" data-bs-dismiss="modal">
                <i class="ki-duotone ki-cross fs-1"><i class="path1"></i><i class="path2"></i></i>
              </div>
            </div>
            <div class="modal-body">
              <p>${message}</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-primary" id="confirmBtn">Confirm</button>
            </div>
          </div>
        </div>
      </div>`;
  }

  afterShown() {
    this.element.querySelector('#confirmBtn').addEventListener('click', () => {
      this.hide({confirmed: true});
    });
  }
}

const modal = new ConfirmModal();
const result = await modal.show('Are you sure you want to proceed?');
if (result && result.confirmed) {
  console.log('User confirmed!');
} else {
  console.log('User cancelled.');
}
Previous LineChart Next PieChart