モーダルダイアログ

任意のページ(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 -->