¿Cómo crear ventanas modales (ventanas emergentes)?

Estoy tratando de usar la función principal de Drupal 8 para abrir una página en una ventana modal. Desafortunadamente, es muy difícil encontrar alguna documentación oficial al respecto, y la mayoría de los blogs que cubren este tema parecen estar desactualizados. Pero hasta donde yo sé, debería ser posible crear un diálogo modal agregando los siguientes atributos a un elemento a:

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

Para que un ejemplo completo se vea así:

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

Donde en mi caso /impressum/lizenzen/43es una ruta a una página de vistas.

Esto parece funcionar, pero solo cuando estoy conectado como administrador. Como esto no parece ser un problema de permisos, supongo que está relacionado con el tema de administración ( Siete ), que podría incluir algunas bibliotecas centrales que Bootstrap (el que uso para mi sitio) podría no estarlo. Pero por extraño que parezca, en la barra de título del modal apareció, en lugar del título de la página, la cadena 'Array', lo que me hace suponer, que tuvo lugar una conversación inesperada de matriz a cadena:

Alguien podría

• llevarme a la documentación oficial de los núcleos API modal,
• explícame, cuál podría ser la razón por la que funciona solo como administrador.
• Y finalmente dime, ¿por qué diablos se lleva a cabo una conversación de matriz a cadena llamando modal?

Esta es la documentación oficial para el cambio de API que ha mencionado:

Modal / dialog / ajax está usando parámetros de consulta en lugar de aceptar encabezados

El detalle más importante es adjuntar esta biblioteca:

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

Usted pregunta por qué esto funciona en páginas de administración sin esto. La razón es que las páginas de administración ya tienen dependencias en la mayoría de las bibliotecas Drupal jQuery, mientras que las páginas que no son de administración se cargan sin ninguna jQuery lista para usar (lo cual es una gran mejora de rendimiento en D8).

Bootstrap Theme

Si está habilitado en la configuración del tema del tema Bootstrap, "jQuery Modal" se reemplaza por "Bootstrap Modal", consulte este fragmento 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 esto funcione, adjunte la misma biblioteca principal que la anterior, de modo que el tema Bootstrap pueda encontrar estas bibliotecas centrales para anularlas.

Para cualquiera que intente agregar esto a un tema, simplemente puede agregar drupal.dialog.ajax a su archivo bibliotecas.yml en dependencias JS:

- core/drupal.dialog.ajax

Más información sobre las dependencias del tema aquí .

También luché con la documentación. Sin embargo, pude hacer que mi Modal funcionara con el Dialog API D8 Core que proporciona.

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

Mostrar un modal

confirmationDialog.showModal();

Cerrar un modal

confirmationDialog.close();

Su tema debe declarar una dependencia en core / drupal.ajax porque ajax no se carga automáticamente para usuarios anónimos.

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