Как создать модальные окна (всплывающие окна)?

10

Я пытаюсь использовать основную функцию Drupal 8, чтобы открыть страницу в модальном окне. К сожалению, очень сложно найти официальную документацию по этому поводу, и большинство блогов, посвященных этой теме, похоже, устарели. Но, насколько я знаю, должно быть возможно создать модальный диалог, добавив следующие атрибуты в a-элемент:

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

Так что полный пример будет выглядеть так:

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

Где в моем случае /impressum/lizenzen/43путь к странице просмотра.

Кажется, это работает, но только когда я вошел в систему как администратор. Поскольку это не похоже на проблему с разрешениями, я предполагаю, что она связана с темой администратора ( Семь ), которая может включать некоторые базовые библиотеки, которые Bootstrap (которые я использую для своего сайта) может не иметь. Но как ни странно, в строке заголовка модала вместо заголовка страницы появилась строка «Массив», что заставляет меня предположить, что произошел неожиданный разговор между массивом и строкой:

Может ли кто-нибудь

приведи меня к официальной документации основных модальных API,
объясните мне, в чем может быть причина того, что он работает только как администратор.
И, наконец, скажите мне, почему же происходит разговор между массивом и строкой, вызывающий модал?

8 javascript

— user5950
источник

Массив является ошибкой drupal.org/project/drupal/issues/2663316

— нет Sssweat

6

Это официальная документация об изменении API, которую вы упомянули:

Модал / dialog / ajax использует параметры запроса вместо принятия заголовков

Самая важная деталь - прикрепить эту библиотеку:

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

Вы спрашиваете, почему это работает на страницах администратора без этого. Причина в том, что страницы администратора уже имеют зависимости от большинства библиотек jQuery Drupal, в то время как страницы, не относящиеся к администраторам, загружаются без каких-либо jQuery из коробки (что является большим улучшением производительности в D8).

Тема начальной загрузки

Если включено в настройках темы темы Bootstrap, «jQuery Modal» заменяется на «Bootstrap Modal», см. Этот фрагмент кода:

LibraryInfo :: альтер ()

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

Чтобы это работало, вы присоединяете ту же основную библиотеку, что и выше, чтобы тема Bootstrap могла найти эти базовые библиотеки для их переопределения.

— 4k4
источник

у вас были проблемы с всплывающим окном, когда страница еще загружалась и пользователь нажимал на кнопку. Страница будет перенаправлена на страницу всплывающего URL.

— Джон

Я пытаюсь заставить это работать на форме узла, но пока не могу. следует ли просто добавить ссылку на форму узла с соответствующими свойствами, чтобы запустить модальный режим загрузки? Я добавляю это в форму alter ... <a href="https://drupal.stackexchange.com/node/43" class="use-ajax" data-dialog-type="modal"> test </a>

— awm

Да, это должно работать. Проверьте в браузере, загружена ли упомянутая библиотека js и работает ли она без ошибок (отключите агрегацию файлов js в настройках производительности системы, чтобы увидеть все файлы js).

— 4k4

5

Для тех, кто пытается добавить это в тему, вы можете просто добавить drupal.dialog.ajax в свой файл library.yml в разделе JS зависимость:

- core/drupal.dialog.ajax

Подробнее о зависимостях темы здесь .

— AyexeM
источник

2

Это не решает проблему для меня. В теме начальной загрузки эта библиотека уже включена по умолчанию.

— user5950

4

Я также боролся с Документацией. Тем не менее, я смог заставить работать мой модал с помощью 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();
  }
});

Отображение модального

confirmationDialog.showModal();

Закрытие модального

confirmationDialog.close();

— Вайбхав Джайн
источник

Похоже, это правильно, основываясь на drupal.org/node/1852224

— Smartsheet eng

1

Ваша тема должна объявить зависимость от core / drupal.ajax, потому что ajax не загружается автоматически для анонимных пользователей.

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

— brooke_heaton
источник