1

The following code does not work:

<div class="topics"><a class="use-ajax" data-dialog-type="modal" href="/topics-listing">All Topics</a></div>

Drupal 8.6.5. Bootstrap subtheme. Chrome console log shows no errors. Rather than a modal, the referenced page opens.

So, how do you create a link to a modal dialog in Drupal 8?

1 Answer 1

4

This html looks ok, but did you include the core/drupal.dialog.ajax js library that attach event to your link ?

In twig :

{{ attach_library('core/drupal.dialog.ajax') }}

In PHP, it looks like this :

$renderArray = [
            '#title' => t('All Topics'),
            '#type' => 'link',
            '#url' => Url::fromRoute('XXX'),
            '#attributes' => [
                'class' => ['use-ajax'],
                'data-dialog-type' => 'modal',
            ],
            '#attached' => [
                'library' => ['core/drupal.dialog.ajax'],
            ],
];
2
  • Can you suggest which twig file and where in that file to place the attach_library, please? Thanks, Oulalahakabu Commented Jan 7, 2019 at 18:39
  • Activate debug:true from twig.config in services.yml, then you can explore html produced by drupal 8 with your browser and see which twig files are used. You can attach this library anywhere it is usefull. Note I'm not sure using attach_library is the best practice, Commented Jan 8, 2019 at 6:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.