tailwindcssでJSなしのモーダル（LightBox)

Astro & tailwindcss　で開発しているとなるべくJSなしで実装したくなります。

画像モーダル表示もその一つ。

実際のコード

<a href="#gid-5" class="md:w-1/4 h-auto">
　　　<img src="../../_astro/06.ekHlzKCQ_2aUmi3.webp" class="" alt="ga01" width="252" height="189" loading="lazy" decoding="async"> 
</a>
<div class="hidden　target:block　fixed z-90 inset-0 p-4 sm:p-6 bg-black/80" id="gid-5"> <div class="flex w-full h-full flex-wrap flex-col justify-center">
　　　<div>
　　　　　　<img src="../../_astro/06.ekHlzKCQ_Z1u9S6g.webp" class="pt-5 w-full h-auto" alt="backGroundImage 06" width="1920" height="1440" loading="lazy" decoding="async">
　　　</div>
　　　<a href="#!" class="block text-white h-5 ">X</a>
　　　</div>
</div>

実際のコードはこんな感じです。

一行目のaで非表示のdivのIDを＃で指定します。

クリックされると、tailwindのtarget:属性により、block属性が発火されます。

最後のaのhref="#!"はスクロール位置をクリック前そのままにしてくれます。

tailwindcssでJSなしのモーダル（LightBox)

Menu