Come creare finestre modali (pop-up)?

Sto cercando di utilizzare la funzione principale di Drupal 8 per aprire una pagina in una finestra modale. Purtroppo è molto difficile trovare una documentazione ufficiale al riguardo e la maggior parte dei blog che trattano questo argomento sembrano essere obsoleti. Ma per quanto ne so, dovrebbe essere possibile creare una finestra di dialogo modale aggiungendo i seguenti attributi a un elemento a:

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

In modo che un esempio completo sembrerebbe:

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

Dove nel mio caso /impressum/lizenzen/43è un percorso per una pagina di visualizzazioni.

Questo sembra funzionare, ma solo quando ho effettuato l'accesso come amministratore. Poiché questo non sembra essere un problema di autorizzazione, presumo sia correlato al tema di amministrazione ( Seven ), che potrebbe includere alcune librerie di base che Bootstrap (quella che utilizzo per il mio sito) potrebbe non essere. Ma stranamente, nella barra del titolo del modale è apparso, invece del titolo della pagina, la stringa "Array", ciò che mi fa supporre, che ha avuto luogo una conversazione inaspettata tra array e stringhe:

Qualcuno potrebbe

• portami alla documentazione ufficiale delle API modali dei core,
• spiegami, quale potrebbe essere la ragione per cui funziona solo come amministratore.
• E infine dimmi, perché mai una conversazione da array a stringa ha luogo chiamando un modale?

Questa è la documentazione ufficiale per la modifica dell'API che hai menzionato:

Modal / dialog / ajax utilizza i parametri della query anziché accettare le intestazioni

Il dettaglio più importante è allegare questa libreria:

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

Ti chiedi perché questo funziona su pagine di amministrazione senza questo. Il motivo è che le pagine di amministrazione hanno già dipendenze dalla maggior parte delle librerie Drupal jQuery, mentre le pagine non amministrative vengono caricate senza jQuery out of the box (che è un grande miglioramento delle prestazioni in D8).

Tema Bootstrap

Se abilitato nelle impostazioni del tema del tema Bootstrap, "jQuery Modal" è sostituito da "Bootstrap Modal", vedere questo frammento di codice:

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

Affinché ciò funzioni, si collega la stessa libreria principale di cui sopra, in modo che il tema Bootstrap possa trovare queste librerie principali per sovrascriverle.

Per chiunque cerchi di aggiungere questo a un tema, puoi semplicemente aggiungere drupal.dialog.ajax al tuo file libraries.yml in Dipendenze JS:

- core/drupal.dialog.ajax

Maggiori informazioni sulle dipendenze dei temi qui .

Ho anche lottato con la documentazione. Tuttavia, sono stato in grado di far funzionare il mio modale utilizzando il Dialog API 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();
  }
});

Visualizzazione di un modale

confirmationDialog.showModal();

Chiusura di un modale

confirmationDialog.close();

Il tuo tema deve dichiarare una dipendenza da core / drupal.ajax perché ajax non viene caricato automaticamente per gli utenti anonimi.

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