it-swarm.com.de

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 dies zu tun veraltet sein. Aber soweit ich weiß, sollte es 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/43 ist 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, was ich Verwendung für meine Website) möglicherweise nicht. Aber seltsamerweise erschien in der Titelleiste des Modals anstelle des Seitentitels die Zeichenfolge "Array", was mich vermuten lässt, dass eine unerwartete Konversation zwischen Array und Zeichenfolge stattgefunden hat: enter image description here

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

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 haben, während Nicht-Administratorseiten ohne jQuery sofort geladen werden (was eine große Leistungsverbesserung in D8 darstellt).

Bootstrap-Thema

Wenn in den Designeinstellungen des Themas Bootstrap) 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, sodass das Thema Bootstrap) diese Kernbibliotheken finden kann, um sie zu überschreiben.

6
4k4

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 über Themenabhängigkeiten hier .

5
AyexeM

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();
4
Vaibhav Jain

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