web-dev-qa-db-fra.com

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

J'essaie d'utiliser Drupal 8 pour ouvrir une page dans une fenêtre modale. Malheureusement, il est très difficile de trouver de la documentation officielle à ce sujet, et la plupart des blogs couvrant ce sujet semblent 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/43 est un chemin d'accès à 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 admin ( Seven ), qui pourrait inclure des bibliothèques de base qui Bootstrap (ce que je utiliser 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 "Tableau", ce qui me fait supposer, qu'un tableau inattendu de conversation de chaîne a eu lieu: enter image description here

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?
8javascript
10
user5950

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.

6
4k4

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

En savoir plus sur dépendances de thèmes ici .

5
AyexeM

J'ai également eu du mal avec la documentation. Cependant, j'ai pu faire fonctionner mon Modal en utilisant 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();
4
Vaibhav Jain

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
1
brooke_heaton