HTML
【ポイント】data属性で紐付ける
index.html
<a class="js-close-button" href="" data-target=".target-modal">開くボタン</a>
<a class="js-close-button" href="" data-target=".target-modal">閉じるボタン</a>
<div class="target-modal">閉じる要素または開く要素</div>
jQuery
data();関数と
hide();とshow();を使って実装
script.js
//クリックで閉じる
jQuery('.js-close-button').on('click', function (e) {
e.preventDefault();
var target = jQuery(this).data('target');
jQuery(target).hide();
});
//クリックで開く
jQuery('.js-open-button').on('click', function (e) {
e.preventDefault();
var target = jQuery(this).data('target');
jQuery(target).show();
});
↧