Làm thế nào để tạo cửa sổ phương thức (cửa sổ bật lên)?

Tôi đang cố gắng sử dụng chức năng cốt lõi của Drupal 8 để mở một trang trong cửa sổ phương thức. Thật không may, rất khó để tìm thấy một số tài liệu chính thức về nó, và hầu hết các blog về chủ đề này dường như đã lỗi thời. Nhưng theo như tôi biết, có thể tạo một hộp thoại theo chế độ bằng cách thêm các thuộc tính sau vào một phần tử:

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

Vì vậy, một ví dụ đầy đủ sẽ trông như:

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

Trường hợp trong trường hợp của tôi /impressum/lizenzen/43là một đường dẫn đến một trang xem.

Điều này có vẻ hiệu quả, nhưng chỉ khi tôi đăng nhập với tư cách quản trị viên. Vì đây dường như không phải là vấn đề về quyền, tôi cho rằng nó có liên quan đến chủ đề quản trị viên ( Seven ), có thể bao gồm một số thư viện cốt lõi mà Bootstrap (mà tôi sử dụng cho trang web của mình) có thể không. Nhưng thật kỳ lạ, trong thanh tiêu đề của phương thức xuất hiện, thay vì tiêu đề trang, chuỗi ArArArray, điều khiến tôi cho rằng, một chuỗi bất ngờ cho cuộc trò chuyện chuỗi đã diễn ra:

Ai đó có thể

• dẫn tôi đến tài liệu chính thức về API phương thức lõi,
• giải thích cho tôi, những gì có thể là lý do mà nó chỉ hoạt động như quản trị viên.
• Và cuối cùng cho tôi biết, tại sao trên trái đất, một cuộc trò chuyện mảng với chuỗi diễn ra gọi một phương thức?

Đây là tài liệu chính thức cho thay đổi API bạn đã đề cập:

Phương thức / hộp thoại / ajax đang sử dụng tham số truy vấn thay vì chấp nhận tiêu đề

Chi tiết quan trọng nhất là đính kèm thư viện này:

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

Bạn hỏi về lý do tại sao điều này hoạt động trên các trang quản trị mà không có điều này. Lý do là, các trang quản trị đã có sự phụ thuộc vào hầu hết các thư viện Drupal jQuery, trong khi các trang không phải quản trị viên được tải mà không có bất kỳ jQuery nào ra khỏi hộp (đây là một cải tiến hiệu suất tuyệt vời trong D8).

Chủ đề Bootstrap

Nếu được bật trong cài đặt chủ đề của chủ đề Bootstrap, "Phương thức jQuery" được thay thế bằng "Phương thức Bootstrap", hãy xem đoạn mã này:

LibraryInfo :: notify ()

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

Để làm việc này, bạn đính kèm cùng thư viện lõi như trên, để chủ đề Bootstrap có thể tìm thấy các thư viện lõi này để ghi đè lên chúng.

Đối với bất kỳ ai đang cố gắng thêm chủ đề này vào một chủ đề, bạn chỉ cần thêm drupal.dialog.ajax vào tệp library.yml của mình trong phần phụ thuộc của JS:

- core/drupal.dialog.ajax

Thêm về phụ thuộc chủ đề ở đây .

Tôi vật lộn với Tài liệu là tốt. Tuy nhiên, tôi đã có thể khiến Modal của mình hoạt động bằng cách sử dụng Dialog API D8 Core cung cấp.

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

Hiển thị một phương thức

confirmationDialog.showModal();

Đóng một phương thức

confirmationDialog.close();

Chủ đề của bạn cần khai báo sự phụ thuộc vào core / drupal.ajax vì ajax không được tải tự động cho người dùng ẩn danh.

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