How to create modal windows (pop-ups)?

Question

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:

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?

Answer 1

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();

Answer 2

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.

Answer 3

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.

Answer 4

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