画像1枚のポップアップ

<div style="text-align: center; margin: 20px auto; width: 400px; max-width: 100%;">
<img src="画像のURL" alt="クリックで拡大" style="width: 100%; height: auto; cursor: pointer; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" onclick="document.getElementById('imageModal').style.display='flex'">
<p style="margin-top: 10px; font-size: 14px; color: #666; line-height: 1.5;">
ここに説明文を入力
</p>
</div>

<div id="imageModal"
style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); z-index: 99999; flex-direction: column; justify-content: center; align-items: center; cursor: zoom-out;"
onclick="this.style.display='none'">

<img src="画像のURL" style="max-width: 90%; max-height: 80%; border: 2px solid #fff; object-fit: contain;">
<p style="color: #fff; margin-top: 15px; font-size: 16px; width: 80%; text-align: center;">ここに説明文を入力</p>

<span style="position: absolute; top: 10px; right: 20px; color: #fff; font-size: 35px; cursor: pointer;">&times;</span>
</div>