モーダルを使用する
目次
モーダルを使用する箇所
- スマホヘッダー（カスタムボタン）
- 各種リンク（ボタンや段落内リンクなど）
必要なもの
- モーダル用CSS：
/css/project/_modal.scss - モーダル用JS：
/js/common.js- 該当コードをアンコメントする。
- スマホヘッダー（カスタムボタン）で使用する場合は、該当コードの修正が必要
- functions.phpでcommon.jsを読み込ませる。
- モーダルを開くリンク：
.js-open-modal - モーダル：
.p-modalbody直下に出力する必要があるので、【ブログパーツ】で作成し、/functions.phpでwp_footer()に出力させる。
カスタマイズ
モーダル内のスクロール位置を保持したい場合
.p-modalに.is-keep-scrollを追加する。
<div id="modal" class="p-modal is-keep-scroll">
...
</div>