JavaScriptを使って、特定の商品オプションを選択するとモーダル表示される注意書きを実装したので、サンプルコードを交えて紹介したいと思います。
先日、会社で運営中のチケット販売サイトにて「学生割チケット」を販売する事になりました。
商品オプションとして追加するだけなので、難しい事案ではありませんが、スタッフから以下のようなリクエストが‥
「学生割チケットを購入した方には、当日会場に学生証を持参するように案内文を掲載したい」
こちらも、商品詳細に赤い太字で注意書きを追記すれば済む話だが‥
「そうすると、知らなかった、読んでいないと苦情を言う人が続出する気が‥学生割の選んだら、全面を覆うように表示される注意書きとかはできないの？」
という経緯で、急きょ苦手なJavaScriptを使って、特定の商品オプションを選択するとモーダル表示される注意書きを実装したので、サンプルコードを交えて紹介したいと思います。
モーダル表示(HTML)
まずは、モダール表示のHTMLから。
<div id="thankYouModal" class="modal" style="display:none;">
<div class="modal-content">
<h3>【注意事項】学生割で購入される方へ</h3>
<p>学割チケットをご購入いただいたお客様は、当日年齢確認のできる<strong>「学生証」</strong>のご提示をお願いいたします。<br>当日確認が取れない場合、通常料金でのご案内となります。予めご了承ください。</p>
<button id="confirmButton" class="confirm-button">注意事項を確認しました</button>
</div>
</div>style="display:none;で、ページが読み込まれたタイミングでは非表示になっています。
特定オプション選択で発火するJavaScript
次は、特定オプションを選択するとモダール表示となるJavaScriptのサンプルコードです。
要件としては、
①「チケット種類」というバリエーションの「学生割」を選択すると、
②モダールボックスが表示される
③モダールボックスに「注意事項を確認しました」と記されたボタンをクリックすると消える
④ただし、他要素（例えば、背景）をクリックしてもモダールボックスが消えない
となります。
document.addEventListener('DOMContentLoaded', function () {
const ticketTypeSelect = document.querySelector('select[name="options[チケット種類]"]');
const modal = document.getElementById('thankYouModal');
const confirmButton = document.getElementById('confirmButton');
// モーダルを表示または非表示にする関数
function toggleModal() {
if (ticketTypeSelect && ticketTypeSelect.value === '学生割') {
modal.style.display = 'flex'; // 学生割選択時にモーダルを表示
} else {
modal.style.display = 'none'; // それ以外の場合は非表示
}
}
// セレクトボックスの値が変更されたらモーダルを切り替え
if (ticketTypeSelect) {
ticketTypeSelect.addEventListener('change', toggleModal);
}
// 確認ボタンを押したらモーダルを閉じる
confirmButton.addEventListener('click', function () {
modal.style.display = 'none';
});
// モーダルの外側をクリックしても閉じないようにする
window.addEventListener('click', function (event) {
if (event.target === modal) {
modal.style.display = 'flex'; // クリックしても再度表示
}
});
});サンプルコードの内容を簡単に解説いたします。
①select[name="options[チケット種類]"]の値が「学生割」なら(ticketTypeSelect.value === '学生割')、モダールボックスのdisplayプロパティの値をflexにする関数(toggleModal)を宣言します。
②この関数は、セレクトボックスに値が入っており、その値が変更されるたびに実行するように、
if (ticketTypeSelect) {
ticketTypeSelect.addEventListener('change', toggleModal);
}
と、条件分岐とイベントメソッドを実装します。
③「注意事項を確認しました」と記されたボタン(confirmButton)をクリックすると、モダールボックスのdisplayプロパティの値をnoneになります。
※モーダル表示のCSSは省略します。
以上、特定の商品オプションを選択するとモーダル表示される注意書きのサンプルコードと解説でした。
配送に関する注意事項や、返品・交換不可など各種制限の案内に活用していただければと思います。
最後まで読んでいただきありがとうございました！
