Como criar janelas modais (pop-ups)?

10

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: insira a descrição da imagem aqui

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?
user5950
fonte
A matriz é um bug drupal.org/project/drupal/issues/2663316
Não Sssweat

Respostas:

6

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.

4k4
fonte
você teve problemas com o pop-up quando a página ainda carregava e o usuário clica no botão? A página será redirecionada para o URL pop-up da página.
22418 Jonh Marh
Estou tentando fazer isso funcionar no formulário do nó, mas até agora não foi possível. deve simplesmente adicionar um link ao formulário do nó com as propriedades apropriadas para acionar um modal para carregar? Estou adicionando este em forma alter ... <a href="https://drupal.stackexchange.com/node/43" class="use-ajax" data-dialog-type="modal"> test </a>
awm
Sim, isso deve funcionar. Verifique no navegador se a biblioteca js mencionada é carregada e executada sem erros (desative a agregação de arquivo js nas configurações de desempenho do sistema para ver todos os arquivos js).
4k4 18/09/19
5

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 .

AyexeM
fonte
2
Isso não resolve o problema para mim. No tema de inicialização, essa biblioteca já está incluída por padrão.
user5950
4

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();
Vaibhav Jain
fonte
Isso parece estar correto, com base em drupal.org/node/1852224
Smartsheet por
1

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