Como criar janelas modais (pop-ups)?

Estou tentando usar a função principal do Drupal 8 para abrir uma página em uma janela modal. Infelizmente, é muito difícil encontrar alguma documentação oficial sobre o assunto, e a maioria dos blogs que abordam esse tópico parece estar desatualizada. Mas, tanto quanto eu sei, deve ser possível criar uma caixa de diálogo modal adicionando os seguintes atributos a um elemento a:

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

Para que um exemplo completo se pareça com:

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

Onde, no meu caso, /impressum/lizenzen/43há um caminho para uma página de visualizações.

Isso parece funcionar, mas apenas quando estou logado como administrador. Como isso não parece ser um problema de permissão, presumo que esteja relacionado ao tema do administrador ( Seven ), que pode incluir algumas bibliotecas principais que o Bootstrap (que eu uso no meu site) pode não ter. Mas, por incrível que pareça, na barra de título do modal apareceu, em vez do título da página, a string 'Array', o que me faz supor, que ocorreu uma matriz inesperada para conversar com string:

Alguém poderia

• leve-me à documentação oficial da API modal de núcleos,
• explique para mim, qual poderia ser o motivo pelo qual ele funciona apenas como administrador.
• E, finalmente, diga-me, por que diabos ocorre uma série de conversas em cadeia, chamada modal?

Esta é a documentação oficial da alteração da API que você mencionou:

Modal / dialog / ajax está usando parâmetros de consulta em vez de aceitar cabeçalhos

O detalhe mais importante é anexar esta biblioteca:

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

Você pergunta por que isso funciona nas páginas de administração sem isso. O motivo é que as páginas de administração já têm dependências na maioria das bibliotecas Drupal jQuery, enquanto as páginas que não são de administração são carregadas sem o jQuery pronto para uso (o que é uma grande melhoria de desempenho no D8).

Tema Bootstrap

Se ativado nas configurações do tema do tema Bootstrap, "jQuery Modal" será substituído por "Bootstrap Modal", consulte este trecho de código:

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

Para que isso funcione, você anexa a mesma biblioteca principal como acima, para que o tema do Bootstrap possa encontrar essas bibliotecas principais para substituí-las.

Para qualquer pessoa que tente adicionar isso a um tema, basta adicionar drupal.dialog.ajax ao seu arquivo libraries.yml nas dependências JS:

- core/drupal.dialog.ajax

Mais sobre dependências de temas aqui .

Eu lutei com a documentação também. No entanto, consegui fazer o meu Modal funcionar usando o 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();
  }
});

Exibindo um Modal

confirmationDialog.showModal();

Fechando um Modal

confirmationDialog.close();

Seu tema precisa declarar uma dependência no core / drupal.ajax porque o ajax não é carregado automaticamente para usuários anônimos.

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