Add custom class from link to drupal-modal drupal 8 with bootstrap theme

Question

In Drupal 8, with the bootstrap theme when you create a link with class and data-dialog-type attributes like the bellow code:

<a class="use-ajax" data-dialog-type="modal"
  href="http://drupal.page/front">text
</a>

You will open content of the page in #drupal-modal element that has these html wrappers:

<div id="drupal-modal" class="modal fade in" tabindex="-1" role="dialog" style="display: block;">
    <div class="modal-dialog" role="document">
         <div class="modal-content">

This structure is generated in: \themes\bootstrap\js\modal.js how we can see on the link.

How do I modify it so that I can pass a class name to the #drupal-modal element from the link a.use-ajax? The class name text could be value of an attribute of the link.

Specifically I'd like to add modal-lg or modal-sm classes or some custom ones.

Answer 1

data-dialog-options allows you to pass any options to jQuery's Dialog Widget. One of the options is dialogClass which allows you to set the class.

Example html:

<a class="use-ajax" 
  data-dialog-type="modal" 
  data-dialog-options="{&quot;width&quot;:800, &quot;dialogClass&quot;: &quot;product-information-incorrect&quot;}" 
  href="#">Click me !</a>

No custom js needed.

Answer 2

Thanks to @Waxi i have read through the other issue and I came up with this:

$(document).on("mousedown", ".use-ajax", function () {
    var modalClass = $(this).data('dialog-class');
    $(document).on('show.bs.modal','.modal', function () {
        $('.modal-dialog',this).addClass("modal-" + modalClass);
    })
});

Had to use mousedown event, coz click wouldn't work as it is blocked by something. Then it is getting content of data-dialog-class so it can be added to the .modal-dialog element after the modal actually loads, because its html is not present before that