📝
【Next.js・Tailwind.css・Micromodal.js】モーダルのアクティブ時に背景を固定する
はじめに
Webサイトやアプリ開発でモーダルを使用する際に、よくMicromodal.jsを使用しています。
今回、Next.jsとTailwind.cssを使用している中で活用しましたが、競合なのかモーダルがアクティブになっている際に、背景固定ができない現象がありました。
その回避方法として、cssの:hasクラスを使用した方法を紹介します。
Micromodal.jsとは
主な特徴は以下のとおりです。
- ファイルサイズが軽量（1.9kb）
- WAI-ARIAガイドラインに準拠
- jQueryに依存しないピュアなJavaScriptで書かれている
- キーボード操作が可能
- 余計なスタイルがあたっていない
- MITライセンス
Micromodal.jsはWAI-ARIAガイドラインに準拠しているため、Webアクセビリティ(a11y)が保証されています。
また、CSSが付属されていないのでカスタマイズ性が高く、非常に使いやすいライブラリになっています。
背景固定の方法
Micromodal.jsオプション
モーダルがアクティブ時の背景固定はMicromodal.jsのオプションにもありますが、今回動作しませんでした。
MicroModal.init({
disableScroll: true
});
hasクラスを使用した回避方法
今回はこちらを活用しました。
#Tailwind.css v4
<body class="has-[.micromodal-slide.is-open]:overflow-hidden">
Tailwind.cssをしない場合
body:has(.micromodal-slide.is-open) {
overflow: hidden;
}
Discussion