モーダルダイアログ
任意のページ(HTML)をモーダルダイアログで表示します。
主にモジュールIDやブログ、カテゴリーを閲覧ページ上からモーダルダイアログで編集するために利用されています。
デフォルトの設定
この機能の設定は、/js/config.jsの以下の箇所にあります。
dialogBtnMark: '.js-dialog-btn', dialogTitleMark: '.js-dialog-title', dialogBodyMark: '.js-dialog-body',
設定の詳細は以下になります。
| 設定項目 | 説明 |
|---|---|
| dialogBtnMark | モーダルダイアログを表示するボタン要素をセレクター形式で設定します。 |
| dialogTitleMark | モーダルダイアログのタイトルとして表示される要素をセレクター形式で設定します。 |
| dialogBodyMark | モーダルダイアログの本文として表示される要素をセレクター形式で設定します。 |
使い方
dialogBtnMark で指定した要素の href 属性で任意のページ(HTML)を指定することで、実装できます。
例として、ブログフィールドモジュール内で以下のテンプレートを読み込むことで管理者ユーザーの場合、モーダルダイアログでブログを編集する機能を実装しています。
<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<p class="acms-admin-module-edit acms-admin-module-edit">
<!-- BEGIN module_setting -->
<a href="/bid/{id}/admin/blog_edit/#acms_custom" class="js-dialog-btn js-link_no_rewrite">編集する</a>
<!-- END module_setting -->
</p>
<!-- END_MODULE Touch_SessionWithAdministration -->