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();

Suggestions and Helpers

Modal are completely free. Everyone is welcome to help.

Feel free to submit your suggestion at issue queue or buy us a coffee

Help us Buy us a coffee ☕️

Meet the Modal Maintainers

Renato G. H. (RenatoG)

Author|Maintainer

Paulo H. Starling (paulocs)

Maintainer

Thalles Ferreira (thalles)

Maintainer

Graphic designer

Nico Grienauer

(grienauer)

Logo author

Modal Documentation

See our documentation here

Credits

http://www.ciandt.com