Bagaimana cara membuat modal windows (pop-up)?

10

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?

8 javascript

— pengguna5950
sumber

Array adalah bug drupal.org/project/drupal/issues/2663316

— No Sssweat

6

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.

— 4k4
sumber

apakah Anda memiliki masalah dengan sembulan ketika halaman masih memuat dan pengguna mengklik tombol. Halaman akan dialihkan ke url halaman popup.

— Jonh

Saya mencoba untuk mendapatkan ini berfungsi pada bentuk simpul tetapi sejauh ini tidak dapat. harus hanya menambahkan tautan ke bentuk simpul dengan properti yang sesuai memicu modal untuk memuat? Saya menambahkan ini dalam bentuk alter ... <a href="https://drupal.stackexchange.com/node/43" class="use-ajax" data-dialog-type="modal"> test </a>

— awm

Ya, ini seharusnya berhasil. Periksa di browser apakah pustaka js yang disebutkan dimuat dan dijalankan tanpa kesalahan (nonaktifkan agregasi file js dalam pengaturan kinerja sistem untuk melihat semua file js).

— 4k4

5

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 .

— AyexeM
sumber

2

Ini tidak menyelesaikan masalah bagi saya. Dalam tema bootstrap, perpustakaan ini sudah disertakan secara default.

— user5950

4

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

— Vaibhav Jain
sumber

Ini tampaknya benar berdasarkan drupal.org/node/1852224

— Smartsheet eng

1

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

— brooke_heaton
sumber