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?


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'],
| improve this answer | |
  • Can you suggest which twig file and where in that file to place the attach_library, please? Thanks, Oulalahakabu – dkrockville Jan 7 '19 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, – Oulalahakabu Jan 8 '19 at 6:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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