Bagaimana cara membuat modal windows (pop-up)?

Saya mencoba menggunakan fungsi inti Drupal 8 untuk membuka halaman di jendela modal. Sayangnya sangat sulit untuk menemukan beberapa dokumentasi resmi tentang hal itu, dan sebagian besar blog yang membahas topik ini tampaknya sudah ketinggalan zaman. Tapi sejauh yang saya tahu, harus dimungkinkan untuk membuat dialog modal dengan menambahkan atribut berikut ke elemen-a:

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

Sehingga contoh lengkap akan terlihat seperti:

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

Di mana dalam kasus saya /impressum/lizenzen/43adalah jalur ke halaman tampilan.

Ini sepertinya berhasil, tetapi hanya ketika saya masuk sebagai admin. Karena ini tampaknya bukan masalah izin, saya menganggap itu terkait dengan tema admin ( Tujuh ), yang mungkin menyertakan beberapa pustaka inti yang mungkin tidak di - boot oleh Bootstrap (yang saya gunakan untuk situs saya). Tapi anehnya, di bilah judul modal muncul, alih-alih judul halaman, string "Array", apa yang membuat saya berasumsi, bahwa array tak terduga ke percakapan string terjadi:

Bisakah seseorang

• bawa saya ke dokumentasi resmi API modal inti,
• jelaskan kepada saya, apa yang bisa menjadi alasan itu hanya berfungsi sebagai admin.
• Dan akhirnya katakan padaku, mengapa percakapan array ke string terjadi memanggil modal?

Ini dokumentasi resmi untuk perubahan API yang telah Anda sebutkan:

Modal / dialog / ajax menggunakan parameter kueri alih-alih menerima tajuk

Detail paling penting adalah untuk melampirkan pustaka ini:

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

Anda bertanya mengapa ini bekerja pada halaman admin tanpa ini. Alasannya adalah, halaman admin sudah memiliki ketergantungan pada sebagian besar pustaka Drupal jQuery, sementara halaman non admin dimuat tanpa jQuery di luar kotak (yang merupakan peningkatan kinerja yang hebat di D8).

Tema Bootstrap

Jika diaktifkan dalam pengaturan tema dari tema Bootstrap, "jQuery Modal" diganti oleh "Bootstrap Modal", lihat cuplikan kode ini:

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

Agar ini berfungsi, Anda melampirkan pustaka inti yang sama seperti di atas, sehingga tema Bootstrap dapat menemukan pustaka inti ini untuk menimpanya.

Bagi siapa pun yang mencoba menambahkan ini ke sebuah tema, Anda bisa menambahkan drupal.dialog.ajax ke file libraries.yml Anda di bawah dependancies JS:

- core/drupal.dialog.ajax

Lebih lanjut tentang dependensi tema di sini .

Saya berjuang dengan Dokumentasi juga. Namun, saya bisa mendapatkan Modal saya bekerja menggunakan Dialog API D8 Core menyediakan.

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

Menampilkan Modal

confirmationDialog.showModal();

Menutup Modal

confirmationDialog.close();

Tema Anda perlu mendeklarasikan ketergantungan pada core / drupal.ajax karena ajax tidak dimuat secara otomatis untuk pengguna anonim.

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