3

Drupal 8 comes with built in modals.

This works:

<a href="/node/11" class="use-ajax" data-dialog-type ="modal">modal</a>

How can I style that modal using twig, to add new classes to the box? The intention is to take over the bootstrap style language.

3
  • 2
    Aren't they jquery UI based?
    – Kevin
    Apr 23, 2020 at 12:31
  • Hmm, I guess (it is part of AJAX API drupal.org/docs/8/api/ajax-api/ajax-dialog-boxes ) - but on the other hand there is status-messages.html.twig
    – nhck
    Apr 23, 2020 at 18:36
  • 1
    @nhck because status messages is a block and the modal isn't one.
    – No Sssweat
    Apr 25, 2020 at 20:27

1 Answer 1

3

Modals in Drupal are built with jQuery UI. If you want to add just some class to the modal window, you can make use of the dialogClass option.

<a href="/node/11"
  class="use-ajax"
  data-dialog-type="modal"
  data-dialog-options="{&quot;dialogClass&quot;:&quot;foobar&quot;}">Click me</a>

or

\Drupal\Core\Link::createFromRoute(t('Click me'), 'entity.node.canonical', [
  'node' => 11,
], [
  'attributes' => [
    'class' => ['use-ajax'],
    'data-dialog-type' => ['modal'],
    'data-dialog-options' => \Drupal\Component\Serialization\Json::encode([
      'dialogClass' => 'foobar',
    ]),
  ],
]);

but that won't make you a Bootstrap modal. For that you could either dynamically load the node and build the markup completely following the Bootstrap sample with a button targeting a <div> with a certain ID (nah, probably not the best idea, performance-wise).

OR you could make use of view modes and the concept of the View Mode Page module.

Create separate pages for different view modes for a given content type.

That is, you create a new view mode for your node type for example mymodal, where you display only the fields you need and where you have full control over the markup using a view-mode-specific template like for example node--article--mymodal.html.twig. Now you can build the markup exactly like Bootstrap needs it. And finally link to this node in that view mode: /node/11/mymodal

or

\Drupal\Core\Link::createFromRoute(t('Click me'), 'view_mode_page.display_entity', [
  'view_mode' => 'mymodal',
  'entity_type' => 'node',
  'entity_id' => 11,
], [
  'attributes' => [
    'class' => ['use-ajax'],
    'data-dialog-type' => ['modal'],
  ],
]);

The only thing that would be missing now is to hide the jQuery UI modal title bar, 'title': FALSE didn't do it. But just CSS would do.

2
  • 1
    Thanks for the detailed write-up and research @leymannx . The second option is a really good idea - thanks! I guess one problem will be that there is no fall-back option - in case no ajax is loaded or when you would like to share the link. The first option doesn't really work I think: bootstrap expects more css classes down the tree, so just the dialogClass on top of the tree doesn't really make it. So I suppose after all I'll have to just bend the css so that the jqueryUI classes look bootstrappy - I somehow had hoped that we could extend the bootstrap_barrio theme for everyone.
    – nhck
    Apr 29, 2020 at 9:18
  • @nhck – Yeah me too. I just had the same problem some days ago. Wished the modal would pick up some template. But no. You still could go the full Bootstrap way, by loading the modalable nodes directly into the markup early on.
    – leymannx
    Apr 29, 2020 at 10:38

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.