年末年始のお知らせなど、一時的なモーダルウィンドウを追加したい際に、Javascriptを使わずにサクッとCSSだけで実装する方法です。
◆実装のメリット
・軽量な実装
・保守性の高いシンプルなコード
◆具体的な実装手順
・表示したい箇所にカスタマイズされたLiquidセクションを追加し、用意したモーダル用コードを挿入
・CSSでスタイリングを適用
◆注意ポイント
ただし、テーマ「Dawn/Rise」の商品情報など、親要素に「transform」プロパティが設定されている場合、画面全体のモーダル表示が正しく機能しません。
事前に親要素のスタイルを確認しておく必要があります。
Javascriptを使わずにCSSだけでモーダルウィンドウを実装する設定例
【設定方法】表示したい箇所にカスタマイズされたLiquidセクションを追加しコードを挿入
【注意事項】モーダルを表示するために追加するコードの親要素に「transform」プロパティが設定されていると画面全体のモーダルにならない（例：テーマ「Dawn/Rise」の商品情報の場合）
