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. 関連モジュール タイトル
ユーザ 7.34 ip_ranges ログインアタック対策は?
JavaScript 7.34 PHP PHPからJavaScriptに変数値を渡したい
コンテンツの作成 7.31 CKEditor CKEditorの新規生成ダイアログ内の初期値の変更
サイトの構築 7.31 Views ブロックViewsの絞り込みが表示されない
言語 7.28 vim vimで全角が化けてしまう
GoogleMaps 7.28 Javascript IE9でGoogle Map APIを利用した住所情報所得がうまくゆかない
アップデート 7.28 Views Pagerが表示されなくなった
アップデート 7.28 DisableMessages モジュールのアップデートガイダンスを非表示にしたい
ユーザの管理 7.27 PHP 新規ユーザーの追加ができない
サイトの構築 7.27 Context block ページ別、カテゴリ別等でブロックの表示有無を簡単にするには
チューニング 7.26 PHP DrupalはNginxで動く?
排他 7.26 lock Viewsモジュールの設定ページのような排他機能
コンテンツの作成 7.26 PHP ノード内の一部(フィールド)を変更する
テーマ 7.23 hook ページや状況によってテーマを切り替える
ユーザ 7.23 User 長い投稿者名の表示が切れる
サイトの環境設定 7.23 Image Style 画像スタイルの使い方(Crop)
サイトの構築 7.23 Conditional fields ノード編集フォームを動的にしたい
コンテンツの作成 7.23 maxlength テキストフィールドの最大長のチェック&カウントダウン
ユーザ 7.23 PHP user_load_multiple()の復帰値
ブロック 7.23 伸縮するfieldsetブロックを追加したい

ページ