モーダル表示(ボタンで開閉)
1
$(function () {
// 「開く」ボタンクリックで
$('.js-open').click(function () {
// 背景を固定させるクラスを付与
$("body").addClass("no_scroll");
// #overlayと、.modal-windowが現れる
$('#overlay, .modal-window').fadeIn();
});
// 「閉じる」ボタン(.js-close)又はオーバーレイ(画面全体)(#overlay)クリックで閉じる
$('.js-close, #overlay').click(function () {
// 背景固定させるクラスを削除
$("body").removeClass("no_scroll");
// #オーバーレイと.modal-windowが閉じる
$('#overlay, .modal-window').fadeOut();
});
});
2
3
開く
4
5
// 「開く」ボタンクリックで
$('.js-open').click(function () {
// 背景を固定させるクラスを付与
$("body").addClass("no_scroll");
// #overlayと、.modal-windowが現れる
$('#overlay, .modal-window').fadeIn();
});
// 「閉じる」ボタン(.js-close)又はオーバーレイ(画面全体)(#overlay)クリックで閉じる
$('.js-close, #overlay').click(function () {
// 背景固定させるクラスを削除
$("body").removeClass("no_scroll");
// #オーバーレイと.modal-windowが閉じる
$('#overlay, .modal-window').fadeOut();
});
});