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

10

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: entrez la description de l'image ici

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?
user5950
la source
Le tableau est un bogue drupal.org/project/drupal/issues/2663316
No Sssweat

Réponses:

6

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.

4k4
la source
avez-vous eu un problème avec la fenêtre contextuelle lorsque la page était encore en cours de chargement et le bouton cliquer sur l'utilisateur La page sera redirigée vers l'URL contextuelle de la page.
Jonh
J'essaye d'obtenir ceci pour fonctionner sur la forme de noeud mais jusqu'ici incapable de. devrait simplement ajouter un lien vers le formulaire de noeud avec les propriétés appropriées déclencher un modal à charger? <a href="https://drupal.stackexchange.com/node/43" class="use-ajax" data-dialog-type="modal"> test </a>
J'ajoute
Oui, cela devrait fonctionner. Vérifiez dans le navigateur si la bibliothèque js mentionnée est chargée et s'exécute sans erreur (désactivez l'agrégation de fichiers js dans les paramètres de performances du système pour voir tous les fichiers js).
4k4
5

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 .

AyexeM
la source
2
Cela ne résout pas le problème pour moi. Dans le thème bootstrap, cette bibliothèque est déjà incluse par défaut.
user5950
4

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();
Vaibhav Jain
la source
Cela semble être correct sur la base de drupal.org/node/1852224
Smartsheet eng
1

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
brooke_heaton
la source