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.

http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal — Waxi, Mar 10 '17 at 23:30

score 7 · Answer 1 · answered Dec 18 '18 at 07:40

7

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.

answered Dec 18 '18 at 07:40

Berend de Boer

1,953
20
15

The dialogClass option has been deprecated in favor of the classes option : https://api.jqueryui.com/dialog/#option-dialogClass – Flo Develop Feb 13 '22 at 09:48

score 2 · Accepted Answer · answered Mar 17 '17 at 00:20

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

Achraf JEDAY · Answer 3 · 2017-08-18T14:57:41.660

My solution

HTML:

<a class="use-ajax" data-dialog-type="modal" href="#" data-dialog-class="your-class">Click me !</a>

Javascript:

  var modalClass;

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

  // Add this part to remove the class when the modal is closed.
  $(document).on('hide.bs.modal','.modal', function () {
      $(this).removeClass(modalClass);
  })

score 0 · Answer 4 · answered Jul 21 '20 at 02:24

To add complementary information to the comments in this post, please see the below example. I use it to hide the title bar programmatically, but the custom class allows you to do the same or even more.

let dialog = Drupal.dialog('#idSelector', {
  'modal': true,
  'dialogClass': 'yourCustomClass',
  'create': function (event, ui) {
    $(ui).find(".ui-dialog-titlebar").hide();
  }
});

score 0 · Answer 5 · answered Oct 14 '22 at 13:15

0

use this for adding your custom class

data-dialog-options= '{"classes":{"ui-dialog":"your class name"}}'

answered Oct 14 '22 at 13:15

user9557336

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 18 '22 at 06:59

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

5 Answers5

Linked