web-dev-qa-db-ja.com

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

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は、ビューページへのパスです。

これは機能するようですが、管理者としてログインしている場合のみです。これは権限の問題ではないようなので、管理テーマ（ Seven ）に関連していると思います。これには、 のコアライブラリが含まれる場合がありますBootstrap （私のサイトで使用しているもの）はそうではないかもしれません。しかし、奇妙なことに、モーダルのタイトルバーに、ページタイトルの代わりに文字列「Array」が表示されました。これは、文字列の会話への予期しない配列が発生したことを想定しています： enter image description here

誰かできましたか

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

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

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

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

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

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

Bootstrapテーマ

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テーマがこれらのコアライブラリを見つけてオーバーライドできるようにします。

6
4k4

これをテーマに追加しようとしている人は、JS依存関係の下のdrupal.dialog.ajaxをlibraries.ymlファイルに追加するだけです。

- core/drupal.dialog.ajax

テーマの依存関係はこちら の詳細。

5
AyexeM

ドキュメンテーションにも苦労しました。しかし、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();
4
Vaibhav Jain

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

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