モーダルダイアログ
任意のページ(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 -->