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リンクは、このデータ属性でこのデフォルトをオーバーライドできるようになりました。これは、アクセシビリティを向上させるために追加されました。