Wie erstelle ich modale Fenster (Popups)?

Ich versuche, die Kernfunktion von Drupal 8 zu verwenden, um eine Seite in einem modalen Fenster zu öffnen. Leider ist es sehr schwierig, eine offizielle Dokumentation darüber zu finden, und die meisten Blogs zu diesem Thema scheinen veraltet zu sein. Soweit ich weiß, sollte es jedoch möglich sein, einen modalen Dialog zu erstellen, indem einem a-Element die folgenden Attribute hinzugefügt werden:

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

Damit ein vollständiges Beispiel aussehen würde:

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

Wo in meinem Fall /impressum/lizenzen/43ist ein Pfad zu einer Ansichtsseite.

Dies scheint zu funktionieren, aber nur, wenn ich als Administrator angemeldet bin. Da dies kein Berechtigungsproblem zu sein scheint, gehe ich davon aus, dass es mit dem Admin-Thema ( Seven ) zusammenhängt, das möglicherweise einige Kernbibliotheken enthält, die Bootstrap (das ich für meine Site verwende) möglicherweise nicht enthält. Aber seltsamerweise erschien in der Titelleiste des Modals anstelle des Seitentitels die Zeichenfolge "Array", was mich vermuten lässt, dass ein unerwartetes Gespräch zwischen Array und Zeichenfolge stattgefunden hat:

Könnte jemand

• führe mich zur offiziellen Dokumentation der Cores Modal API,
• Erklären Sie mir, was der Grund sein könnte, dass es nur als Administrator funktioniert.
• Und zum Schluss sag mir, warum um alles in der Welt findet ein Array-zu-String-Gespräch statt, das ein Modal aufruft?

Dies ist die offizielle Dokumentation für die API-Änderung, die Sie erwähnt haben:

Modal / dialog / ajax verwendet Abfrageparameter, anstatt Header zu akzeptieren

Das wichtigste Detail ist das Anhängen dieser Bibliothek:

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

Sie fragen, warum dies auf Administrationsseiten ohne dies funktioniert. Der Grund dafür ist, dass Administrationsseiten bereits Abhängigkeiten von den meisten Drupal-jQuery-Bibliotheken aufweisen, während Nicht-Administrationsseiten sofort ohne jQuery geladen werden (was eine große Leistungsverbesserung in D8 darstellt).

Bootstrap-Thema

Wenn in den Designeinstellungen des Bootstrap-Themas aktiviert, wird "jQuery Modal" durch "Bootstrap Modal" ersetzt. Weitere Informationen finden Sie in diesem Codeausschnitt:

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

Damit dies funktioniert, fügen Sie dieselbe Kernbibliothek wie oben hinzu, damit das Bootstrap-Design diese Kernbibliotheken finden kann, um sie zu überschreiben.

Für alle, die versuchen, dies einem Thema hinzuzufügen, können Sie einfach die Datei drupal.dialog.ajax zu Ihrer Datei library.yml unter JS-Abhängigkeiten hinzufügen:

- core/drupal.dialog.ajax

Mehr zu Themenabhängigkeiten hier .

Ich hatte auch Probleme mit der Dokumentation. Mit der von D8 Core bereitgestellten Dialog-API konnte ich mein Modal jedoch zum Laufen bringen.

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

Anzeigen eines Modals

confirmationDialog.showModal();

Modal schließen

confirmationDialog.close();

Ihr Thema muss eine Abhängigkeit von core / drupal.ajax deklarieren, da Ajax für anonyme Benutzer nicht automatisch geladen wird.

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