drupal 8 の標準機能のダイアログ/ポップアップを表示する方法

カテゴリ コンテンツの管理 コアバージョン 8.9.x 関連モジュール Dialog Modal Canvas

drupal 8 では モーダルダイアログ、非モーダルダイアログ、キャンバス外のダイアログ等、ページ全体をリロードする必要なしに追加情報を表示するための迅速で簡単な方法があります。

  • モーダルダイアログ:
    ページ全体に重なり、モーダルダイアログが表示されている間は他の要素をクリックできません。同時に開くことができるモーダルポップアップは1つだけです。
  • 非モーダルダイアログ:
    ポップアップしてページの上部に表示されますが、ページ上の他の要素をクリックすることもできます。複数のダイアログを同時に表示できます。
  • キャンバス外のダイアログ:
    他のコンテンツと重なるポップアップウィンドウはありませんが、他のコンテンツを横に移動することでページにスライドします。このタイプのダイアログは、ユーザーが下にスクロールする必要のある長い詳細ページなど、コンテンツのより大きな部分を表示する場合に特に役立ちます。また、キャンバス外のダイアログは、モバイルデバイスでも使用できます。

リンクに専用の属性を加えるだけで実装できます。

<a
        class="use-ajax" 
        data-dialog-options='{"width":400, "title":"ダイアログタイトル"}' 
        data-dialog-renderer="off_canvas" 
        data-dialog-type="dialog" 
        href="/node/1/edit">
    編集
</a>

Twig Tweakモジュールが有効なら

{{ drupal_link(
    '編集',
    ['/node/', raw_arguments.nid, '/edit'] | join, {
        attributes: {
            class: ['use-ajax'],
            'data-dialog-options': '{"width":"400", "title": "ダイアログタイトル"}',
            'data-dialog-type': 'dialog',
            'data-dialog-renderer': 'off_canvas'
        }
    },
    check_access=true
) }}
  • data-dialog-type:
    modal または dialog。
  • data-dialog-options:
    Drupal.dialogのオプションのJSONエンコードされた文字列。使用可能なすべてのオプションについては、http://api.jqueryui.com/dialog/ を参照してください。
  • data-dialog-renderer:
    ダイアログリンクで、ダイアログタイプに加えてレンダラーを指定できるようにします。'off_canvas'は キャンバス外のダイアログを表示する場合に必要です。
  • data-ajax-wrapper:
    AJAXを介してフェッチされたコンテンツで置き換えられるHTML要素(#なし)のIDを受け入れます。AJAXシステムはDrupal.Ajaxのラッパーの設定をすでにサポートしており、この動作は変更されていません。これで、AJAXリンクでもこれを使用できます。
  • data-ajax-progress:
    デフォルトでは、AJAXリンクはスロバープログレスインジケーターを使用していました。AJAXリンクは、このデータ属性でデフォルトをオーバーライドできるようになりました(これを「フルスクリーン」に設定するなどして)。
  • data-ajax-focus:
    フォーカスを受け取る要素をターゲットとするjQueryセレクターを受け入れます。デフォルトでは、AJAXリクエストが処理された後、フォーカスはAJAXリンクに返されます。AJAXリンクは、このデータ属性でこのデフォルトをオーバーライドできるようになりました。これは、アクセシビリティを向上させるために追加されました。

OTHER FAQ

Drupal開発・運用の疑問/質問の答えはここに

無料ユーザー登録すると質問できます。

カテゴリ Core Ver. 関連モジュール タイトル
アップデート 8.9.x Composer update Composer で drupal/core-8.9.7 に更新できなくなった場合の処置
サイトの構築 7.59 Drupal.ajax drupal 7 で Uncaught TypeError: Drupal.ajax is undefined となったときの対応方法
Proxy 7.59 Proxy Apache settings.php リバースプロキシ(Apache)+バックグランドWeb(Drupal 7 )でログインセッションを維持する方法
リバースプロキシ 8.9.x mod_proxy mod_proxy_http mod_ssl Apache2.4 から httpsサーバーへリバースプロキシする方法
コンテンツの作成 8.9.x node ノード保存時の前回値の参照方法
サイト情報 8.9.x api Drupal::request() メモ
テーマ 8.9.x Twig Twig で 月末日を算出する方法
SESSION 8.9.x api $_SESION操作のAPI
フォーム 8.9.x api GET/POSTされた情報を得る方法
テーマ 8.9.x patch パッチ 開発環境のファイル変更を本番環境にパッチでデプロイする方法(画像含まず)
コンテンツの作成 8.9.x vim nkf ファイルのエンコーディングを確認、変更する方法
サイトの環境設定 7.59 さくらのレンタルサーバー php Options さくらのレンタルサーバーで パブリック/プライベートディレクトリにファイルが書き込まれないとき
ユーザの管理 8.9.x user pass drupal 8 で 管理者(uid=1)パスワードがわからなくなったとき 新しいパスワードを設定する方法
ユーザの管理 7.59 user pass drupal 7 で 管理者(uid=1)パスワードがわからなくなったとき 新しいパスワードを設定する方法
コンテンツの管理 8.9.x Dialog Modal Canvas drupal 8 の標準機能のダイアログ/ポップアップを表示する方法
コンテンツの作成 8.9.x Display sweet, Views, Twig Tweak, Views field formatter テーマに頼らず コンテンツのフィールドとしてViewsを埋め込み表示する方法
コンテンツの作成 8.9.x CSS キャプション付きの(右寄/左寄)画像を画像サイズを基準にきれいに表示する方法
コンテンツの作成 8.9.x CKEditor CKEditor編集中の見た目をフロントと全く同様にする方法
アップデート 8.9.x Composer update composer update するときに パッチが必要なモジュールが更新されパッチが消えてしまうことへ対応する方法
アップデート 8.9.x PHP CentosでPHPのバージョンアップ(例:5.3->5.6)を行う方法

ページ