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

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