一覧ページでエントリーの情報をモーダル表示したい

[nyattodesign]

いつもお世話になっております。

エントリーのモーダル表示について質問です。

一覧ページに設置したサマリーモジュール(Entry_Summary)の各エントリーの詳細をモーダルで表示したいと考えています。

モーダル部分のエントリー系モジュールで ctx="eid/{eid}" が使えればよいのですが、一覧ページでは使えません。

できればiframeを使うのは避けたいのですが、何か方法はありますか？

[Sugar]

お世話になっております。

アップルップル菅原です。

（申し訳ありません、サンプルの  unit:veil の END を忘れていたので投稿し直しました ）

post include を仕込んでおく方法はいかがでしょうか？

https://developer.a-blogcms.jp/document/postinclude/csv-1274.html

さっくりとサンプル作ってみたので参考にしてみてください。

---

■ 一覧

<!-- BEGIN_MODULE Entry_Summary id="summary_sample_id" -->

<div>

<ul>

<!-- BEGIN unit:loop -->

<!-- BEGIN entry:loop -->

<li>

<h3>{title}</h3>

<p>{summary}</p>

<div style="border: 3px solid aquamarine; padding: 10px;">

<form action="/" method="post" class="js-post_include" target="#postEntry{eid}">

<button type="submit" name="ACMS_POST_2GET">ポスト</button>

<input type="hidden" name="tpl" value="/post-entry-sample.html" />

<input type="hidden" name="bid" value="{bid}">

<input type="hidden" name="cid" value="{cid}">

<input type="hidden" name="eid" value="{eid}">

</form>

</div>

<div style="border: 3px solid palevioletred; padding: 10px; height: 100px; overflow: scroll;">

<div id="postEntry{eid}">ここにボディの内容が入るので、この部分をモーダル表示させてあげれば良さそうです。</div>

</div>

</li>

<!-- END entry:loop -->

<!-- END unit:loop -->

</ul>

</div>

<!-- END_MODULE Entry_Summary -->

■ post-entry-sample.html

<div style="background: peachpuff; padding: 10px;">

<!-- BEGIN_MODULE Entry_Body -->

<!-- BEGIN entry:loop -->

<h2>{title}</h2>

<!-- BEGIN unit:veil -->

<div class="clearfix">

@include("/include/unit.html")

</div>

<!-- END unit:veil -->

<!-- END entry:loop -->

<!-- END_MODULE Entry_Body -->

</div>

2021年9月30日木曜日 14:05:11 UTC+9 nyattodesign:

[nyattodesign]

ありがとうございます。

ポストインクルードを実装するのは初めてでしたが、教えていただいたサンプルを参考にしてモーダル表示を実現できました！

1点、備忘録として残しておきますと、

ローカルではエラーが出なかったのですが、サーバ上でtplファイルが404エラーだったので

allow_tpl_path でtplファイルを指定する必要がありました。
https://developer.a-blogcms.jp/document/postinclude/forbid_tpl_url_context.html

2021年10月1日金曜日 11:56:23 UTC+9 suga...@appleple.com:

[Sugar]

実現できたとのことよかったです！

＞allow_tpl_path でtplファイルを指定する必要がありました。

おっしゃる通りその対応は必須になります。

こちらで気づけずすみません...。

2021年10月4日月曜日 11:51:43 UTC+9 nyattodesign:

[nyattodesign]

いえ、ポストインクルードのドキュメントを読んでいて準備が必要なのはなんとなく感じていたのですが、ローカルでエラーが出ないので不思議な感じでした。

次回からは大丈夫です。ありがとうございました！

2021年10月4日月曜日 12:06:15 UTC+9 suga...@appleple.com: