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

10

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: ingrese la descripción de la imagen aquí

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?
usuario5950
fuente
La matriz es un error drupal.org/project/drupal/issues/2663316
No Sssweat

Respuestas:

6

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.

4k4
fuente
¿Tuviste problemas con la ventana emergente cuando la página aún se carga y el usuario hace clic en el botón? La página redirigirá a la URL emergente de la página.
Jonh
Estoy tratando de hacer que esto funcione en el formulario de nodo, pero hasta ahora no puedo. ¿Debería simplemente agregar un enlace al formulario de nodo con las propiedades apropiadas para activar la carga modal? Estoy agregando esto en forma alter ... <a href="https://drupal.stackexchange.com/node/43" class="use-ajax" data-dialog-type="modal"> test </a>
awm
Sí, esto debería funcionar. Compruebe en el navegador si la biblioteca js mencionada está cargada y se ejecuta sin errores (deshabilite la agregación de archivos js en la configuración de rendimiento del sistema para ver todos los archivos js).
4k4
5

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í .

AyexeM
fuente
2
Esto no resuelve el problema para mí. En el tema de arranque, esta biblioteca ya está incluida por defecto.
user5950
4

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();
Vaibhav Jain
fuente
Esto parece ser correcto basado en drupal.org/node/1852224
Smartsheet spa
1

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