Comment créer des fenêtres modales (pop-ups)?

J'essaie d'utiliser la fonction principale de Drupal 8 pour ouvrir une page dans une fenêtre modale. Malheureusement, il est très difficile de trouver une documentation officielle à ce sujet, et la plupart des blogs couvrant ce sujet semblent obsolètes. Mais pour autant que je sache, il devrait être possible de créer une boîte de dialogue modale en ajoutant les attributs suivants à un élément a:

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

Pour qu'un exemple complet ressemble à ceci:

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

Où dans mon cas /impressum/lizenzen/43est un chemin vers une page de vues.

Cela semble fonctionner, mais uniquement lorsque je suis connecté en tant qu'administrateur. Comme cela ne semble pas être un problème d'autorisation, je suppose qu'il est lié au thème d'administration ( Seven ), qui pourrait inclure certaines bibliothèques de base que Bootstrap (que j'utilise pour mon site) pourrait ne pas. Mais curieusement, dans la barre de titre du modal est apparue, au lieu du titre de la page, la chaîne "Array", ce qui me fait supposer, qu'un tableau inattendu de conversation de chaîne a eu lieu:

Quelqu'un pourrait-il

• conduisez-moi à la documentation officielle de l'API modal des cœurs,
• expliquez-moi, quelle pourrait être la raison pour laquelle cela fonctionne uniquement en tant qu'administrateur.
• Et enfin, dites-moi, pourquoi diable une conversation de tableau à chaîne a lieu en appelant un modal?

Voici la documentation officielle pour le changement d'API que vous avez mentionné:

Modal / dialog / ajax utilise des paramètres de requête au lieu d'accepter les en-têtes

Le détail le plus important est de joindre cette bibliothèque:

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

Vous demandez pourquoi cela fonctionne sur les pages d'administration sans cela. La raison en est que les pages d'administration ont déjà des dépendances sur la plupart des bibliothèques Drupal jQuery, tandis que les pages non admin sont chargées sans jQuery hors de la boîte (ce qui est une grande amélioration des performances dans D8).

Thème Bootstrap

S'il est activé dans les paramètres de thème du thème Bootstrap, "jQuery Modal" est remplacé par "Bootstrap Modal", consultez cet extrait de code:

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';
  }

Pour que cela fonctionne, vous attachez la même bibliothèque de base que ci-dessus, afin que le thème Bootstrap puisse trouver ces bibliothèques de base pour les remplacer.

Pour toute personne essayant d'ajouter ceci à un thème, vous pouvez simplement ajouter drupal.dialog.ajax à votre fichier bibliothèques.yml sous les dépendances JS:

- core/drupal.dialog.ajax

Plus d'informations sur les dépendances de thème ici .

J'ai également eu du mal avec la documentation. Cependant, j'ai pu faire fonctionner mon Modal à l'aide de l'API Dialog D8 Core.

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

Affichage d'un modal

confirmationDialog.showModal();

Fermer un modal

confirmationDialog.close();

Votre thème doit déclarer une dépendance sur core / drupal.ajax car ajax n'est pas chargé automatiquement pour les utilisateurs anonymes.

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