Dialog Tools

The Dialog Tools module provides a set of utilities that extends the dialog support present in Drupal 9+.

The primary use case for this module is to:

• make it easy to display contents in an interactive overlay
• extend existing features with a display in modal option

Usage

From a render array

You can display content in dialogs from render arrays in a declarative way.

1. Attach the library dialog_tools/discover to your render array

   $build['#attached']['library'][] = 'dialog_tools/discover';

2. Create the modal content, eg. in a container with the class name "dialog-tools-dialog"
   

     use Drupal\Component\Serialization\Json;
   

      $build['dialog']['#type'] = 'container';
      // The "dialog-tools-dialog" class makes the container being discovered and
      // initialized by Dialog Tools.
      $build['dialog']['#attributes']['class'][] = 'dialog-tools-dialog';
      // The "data-dialog-tools-button" attribute contains the ID of the opening
      // button element.
      $build['dialog']['#attributes']['data-dialog-tools-button'] = 'modal-open-button';
      // Some dialog options, see more at https://api.jqueryui.com/dialog/
      $build['dialog']['#attributes']['data-dialog-tools-options'] = Json::encode([
        'title' => t('Modal title'),
        'width' => '80%',
        'modal' => TRUE,
      ]);
   
      $build['dialog']['content'] = [
        '#markup' => t('Test!'),
      ];
   

3. Add the modal opening button

      $build['modal_open_button'] = [
        '#type' => 'html_tag',
        '#tag' => 'button',
        '#value' => t('Open modal'),
        '#attributes' => [
          'type' => 'button',
          'id' => 'modal-open-button',
          'class' => ['button', 'button--primary'],
        ],
      ];
   

From views

Currently Dialog Tools enhace the operations links views field with the ability
to load and display link target content in a modal dialog. To do so, just enable
de option "Open links in modal" in the operations field setting. It can be
enabled only to some particular links by entering their IDs in an additional
configuration option.