Modal

Use Modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Just go at: Administration » Structure » Modal

Have fun :)

Modal 6 is ready 🍻

Highlights:

✅ Drupal 11
✅ Drupal Dialog API
✅ Bootstrap 5

Enjoy! 😀

With Modal you're able to

Flexible Placement: Position modals anywhere through the CMS;
Content Creation: Utilize CKEditor for modal content;
Display Configuration: Specify pages to show your modal;
Configuration Management: Export and import modals easily;
Wildcard Usage: Use wildcards in the URL path for flexibility;
Page Load Display: Set the modal to appear on page load;
Custom Triggering: Open modal by clicking a custom class or ID;
Dynamic Modification: Customize modals dynamically with hooks;
Custom Actions: Create actions with hook_modal_submit();
Visual: Personalize modal's header, footer, and buttons;
Sizes: Support for different modal sizes;
Access Control: Select roles that can view the modal;
API: Create modals programmatically via the Entity Manager.

Liked? Give us a star ⭐️ at top-right of this page to encourage me

Matrix

Modal	D9	D10	D11	Bootstrap	Dialog API	Toast	Status
6.0.x	❌	✅	✅	✅	✅	✅	New Features
5.1.x	❌	✅	✅	✅	❌	❌	Stable
5.0.x	✅	✅	❌	✅	❌	❌	Bugfixes only

Hooks

hook_modal_alter

You're able to update your Modal before display with this code

/**
 * Implements hook_modal_alter().
 */
function HOOK_modal_alter(&$modal, $modal_id) {
  $modal->setLabel('Title Updated');
  $modal->setBody('Body Updated');
}

hook_modal_ID_alter

You're able to update Modal by ID (machine_name) with this example

/**
 * Implements hook_modal_ID_alter().
 */
function HOOK_modal_ID_alter(&$modal, $modal_id) {
  $modal->setLabel('New Title');
  $modal->setBody('New Body');
}

hook_modal_submit

You're able to use Hook Modal Submit and work with Ajax with this example

/**
 * Implements hook_modal_submit().
 */
function HOOK_modal_submit($modal, $modal_state, $modal_id) {

  // Your AJAX logic here.
  \Drupal::logger('modal_page')->notice('Modal Submit was triggered');

}

Insert Modal programmatically

$modal = \Drupal::entityTypeManager()->getStorage('modal')->create();

$modal->setId('modal_id');
$modal->setLabel('Modal Title');
$modal->setBody('Modal Content');
$modal->setPages('/hello');
$modal->save();