モーダルウィンドウ（ポップアップ）を作成する方法

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（私のサイトで使用しているもの）にはないコアライブラリが含まれている可能性がある管理テーマ（Seven）に関連していると思います。しかし、奇妙なことに、モーダルのタイトルバーに、ページタイトルの代わりに、文字列「配列」が表示されました。

誰かできましたか

• コアモーダルAPIの公式ドキュメントに誘導し、
• 管理者としてのみ機能する理由は何ですか？
• そして最後に私に教えてください、なぜ地球上でモーダルを呼び出すために文字列の会話への配列が行われるのですか？

これは、あなたが言及したAPI変更の公式ドキュメントです：

Modal / dialog / ajaxは、ヘッダーを受け入れる代わりにクエリパラメータを使用しています

最も重要な詳細は、このライブラリを添付することです：

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

これがなくても管理ページでこれが機能する理由を尋ねます。その理由は、管理ページはすでにほとんどのDrupal jQueryライブラリに依存しているのに対し、非管理ページはそのままjQueryなしでロードされるためです（これはD8のパフォーマンスが大幅に向上しています）。

ブートストラップのテーマ

Bootstrapテーマのテーマ設定で有効にした場合、「jQuery Modal」は「Bootstrap Modal」に置き換えられます。次のコードスニペットを参照してください。

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

これを機能させるには、上記と同じコアライブラリをアタッチして、Bootstrapテーマがこれらのコアライブラリを見つけてオーバーライドできるようにします。

これをテーマに追加しようとしている人のために、あなたは単にJS依存関係の下のlibraries.ymlファイルにdrupal.dialog.ajaxを追加することができます：

- core/drupal.dialog.ajax

テーマの依存関係について詳しくは、こちらをご覧ください。

ドキュメンテーションにも苦労しました。しかし、D8 Coreが提供するダイアログAPIを使用して、モーダルを機能させることができました。

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

匿名ユーザーに対してajaxが自動的にロードされないため、テーマはcore / drupal.ajaxへの依存関係を宣言する必要があります。

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