I use Bootstrap has a base theme. In my custom theme, I call some content in a modal like this:
<a href="{{ item.content['#url'] }}" type="button" class="use-ajax btn btn-default btn-lg btn-more" data-dialog-type="modal">{{ 'Read more'|t }} <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>

I'm using in particular class="use-ajax" and data-dialog-type="modal"

I wanted to alter the HTML of the modal, but I discovered that the modal displayed was not using the twig template from bootstrap theme: /themes/bootstrap/templates/bootstrap/bootstrap-modal.html.twig

So I try to call the modal with data-dialog-type="bootstrap_modal" but I get a ajax error... :-(

Maybe you could tell me what I'm not understanding? And how to make drupal use bootstrap modal instead of default one...

Thank you for your time and your theme.


anou created an issue. See original summary.

anou’s picture

After some debug, I found that when calling the modal with class="use-ajax" and data-dialog-type="modal", bootstrap /themes/bootstrap/js/misc/dialog.ajax.jsand /themes/bootstrap/js/modal.js are called.

But seems that the twig tpl. /themes/bootstrap/templates/bootstrap/bootstrap-modal.html.twig is never used, at least in this case.

So how to customize the HTML output of a modal? Is there something to config to tell Drupal to use the twig tpl?

Thank you for your help

DanBerk4’s picture

I'm dealing with the same issue, and looks like the markup for the modal is generated in /themes/bootstrap/js/modal.js

markcarver’s picture

Status: Active » Closed (duplicate)
Related issues: +#2831237: Bootstrap modal does not work well with jQuery UI dialog

Yes, there are Drupal.theme.bootstrapModal* methods defined in ./js/modal.js. These are what create the modals. That being said, this related issue is changing them soon, quite drastically.