9

I am trying to use Drupal 8's core function to open a page in a modal window. Unfortunately it is very hard to find some official documentation about it, and most of the blogs covering this topic seem to be outdated. But as far as I know, it should be possible to create a modal dialog by adding the following attributes to an a-element:

class="use-ajax” data-dialog-type="modal"

So that a full example would look like:

<a href="/impressum/lizenzen/43" class="use-ajax" data-dialog-type="modal">
   <span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span>
</a>

Where in my case /impressum/lizenzen/43 is a path to a views page.

This seems to work, but only when I am logged in as admin. As this does not seem to be an permission problem, I assume it is related to the admin theme (Seven), that might include some core libraries that Bootstrap (the which I use for my site) might not. But oddly enough, in the title bar of the modal appeared, instead of the page title, the string ´Array´, what makes me assume, that an unexpected array to string conversation took place: enter image description here

Could somebody

  • lead me to the official documentation of cores modal API,
  • explain to me, what could be the reason that it works as admin only.
  • And finally tell me, why on earth an array to string conversation takes place calling a modal?
6

This the official documentation for the API change you've mentioned:

Modal/dialog/ajax is using query parameters instead of accept headers

The most important detail is to attach this library:

$build['#attached']['library'][] = 'core/drupal.dialog.ajax';

You ask about why this works on admin pages without this. The reason is, admin pages already have dependencies on most Drupal jQuery libraries, while non admin pages are loaded without any jQuery out of the box (which is a great performance improvement in D8).

Bootstrap Theme

If enabled in the theme settings of the Bootstrap theme, "jQuery Modal" is replaced by "Bootstrap Modal", see this code snippet:

LibraryInfo::alter()

elseif ($extension === 'core') {
  // Replace core dialog/jQuery UI implementations with Bootstrap Modals.
  if ($this->theme->getSetting('modal_enabled')) {
    $libraries['drupal.dialog']['override'] = 'bootstrap/drupal.dialog';
    $libraries['drupal.dialog.ajax']['override'] = 'bootstrap/drupal.dialog.ajax';
  }

For this to work you attach the same core library as above, so that the Bootstrap theme can find these core libraries to override them.

  • did you have problem with popup when page still loading and user click to button. Page will redirect to page popup url. – Jonh Mar 2 '18 at 7:45
  • I am trying to get this to work on the node form but so far unable to. should simply adding a link to the node form with the appropriate properties trigger a modal to load? I am adding this in form alter ... <a href="/node/43" class="use-ajax" data-dialog-type="modal"> test </a> – awm Sep 18 '18 at 17:47
  • Yes, this should work. Check in the browser whether the mentioned js library is loaded and runs without errors (disable js file aggregation in the system performance settings to see all js files). – 4k4 Sep 18 '18 at 18:33
4

For anyone trying to add this to a theme, you can simply add drupal.dialog.ajax to your libraries.yml file under JS dependancies :

- core/drupal.dialog.ajax

More about theme dependencies here.

  • 2
    This does not solve the problem for me. In bootstrap theme this library is already included by default. – user5950 Sep 26 '17 at 21:07
3

I struggled with the Documentation as well. However, I was able to get my Modal working using the Dialog API D8 Core provides.

confirmationDialog = Drupal.dialog(CONTENT_OF_MODAL, {
  dialogClass: 'ADD_ANY_CLASSES',
  resizable: false,
  closeOnEscape: false,
  create: function () {
    $(this).parent().find('.ui-dialog-titlebar-close').remove();
  },
  beforeClose: false,
  close: function (event) {
    $(event.target).remove();
  }
});

Displaying a Modal

confirmationDialog.showModal();

Closing a Modal

confirmationDialog.close();
0

Your theme needs to declare a dependency on core/drupal.ajax because ajax is not loaded automatically for anonymous users.

dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

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.