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.
For suggestions, feel free to post on Modal's issue queue.
Matrix
Matrix
| Modal version | D9 | D10 | D11 | Bootstrap | Dialog API |
| 6.0.x | ❌ | ✅ | ✅ | ✅ | ✅ |
| 5.1.x | ❌ | ✅ | ✅ | ✅ | ❌ |
| 5.0.x | ✅ | ✅ | ❌ | ✅ | ❌ |
Hooks
hook_modal_alter
You're able to update your Modal before display with this code
/**
* Implements hook_modal_alter().
*/
function PROJECT_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 PROJECT_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 PROJECT_modal_submit($modal, $modal_state, $modal_id) {
// Your AJAX 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 or send suggestions.
Feel free to submit your suggestion on the issue queue or buy us a coffee
Meet the Project Maintainers
Graphic designer
Modal Documentation
See our documentation here and if you liked give us your star ⭐️
Credits
