【jQuery】一度閉じたら一定時間表示しないポップアップの作成方法

Webサイトのユーザーエクスペリエンスは、ユーザーがサイトをどの程度楽しみ、使いやすく感じるかを左右します。その中でも特に重要な要素の一つが、ポップアップの利用です。ポップアップは情報を引き立て、ユーザーの注目を引く強力なツールである一方、頻繁に現れすぎるとユーザーを疲れさせ、結果として反対効果をもたらすことがあります。

そこで今回は、jQueryを利用して”一度閉じたら一定時間表示しない”という工夫を施したポップアップの作り方を解説します。この方法を用いれば、ユーザーがポップアップを閉じた後、設定した時間が経つまでそのポップアップは再度表示されません。これにより、ユーザーがウェブサイトを快適に利用できるよう、ポップアップの頻度を適切にコントロールすることが可能となります。

さて、このユーザーフレンドリーなポップアップを実装するためにはどのようにすれば良いのでしょうか？それでは早速見ていきましょう。

なぜ一度閉じたら一定時間表示しないポップアップが必要なのか？
jQueryとローカルストレージを使用した実装方法
コードの解説
注意点と制限

なぜ一度閉じたら一定時間表示しないポップアップが必要なのか？

ポップアップはウェブサイト上で非常に効果的なツールです。しかし、頻繁に表示されるポップアップはユーザーのウェブサイト体験を阻害する可能性があります。ユーザーがポップアップを一度閉じたら、そのポップアップが一定時間表示されないように制御することで、ウェブサイトの利用者に対するストレスを軽減し、UX（ユーザーエクスペリエンス）を向上させることができます。

jQueryとローカルストレージを使用した実装方法

jQueryとローカルストレージを組み合わせることで、この機能を簡単に実装することができます。ユーザーがポップアップを閉じると、その時点のタイムスタンプをローカルストレージに保存します。次にウェブサイトが読み込まれるとき、そのタイムスタンプを参照し、設定した時間が経過していればポップアップを再表示します。

コードの解説

以下のコードスニペットは、一度閉じたら一定時間表示しないポップアップの作り方を示しています。

<!-- HTML -->
<div id="popup" style="display: none;">
    <button id="closePopup">閉じる</button>
    <p>これはポップアップです</p>
</div>

<!-- jQuery -->
<script>
$(document).ready(function() {
    var delayHours = 24;
    var popup = $("#popup");
    var closeBtn = $("#closePopup");

    if (localStorage.getItem("popupClosed")) {
        var closedTime = new Date(localStorage.getItem("popupClosed"));
        var currentTime = new Date();
        var diffTime = Math.abs(currentTime - closedTime);
        var diffHours = Math.ceil(diffTime / (1000 * 60 * 60)); 

        if (diffHours >= delayHours) {
            popup.show();
        }
    } else {
        popup.show();
    }

    closeBtn.click(function() {
        localStorage.setItem("popupClosed", new Date());
        popup.hide();
    });
});
</script>

このコードは以下の通りに動作します。

ページがロードされると、localStorageから”popupClosed”アイテムのタイムスタンプを取得します。

もし”popupClosed”アイテムが存在し、かつその時間が設定された遅延時間以上前であれば、またはアイテムが存在しない場合にポップアップを表示します。

“閉じる”ボタンがクリックされると、現在の時間を”popupClosed”アイテムとしてlocalStorageに保存し、ポップアップを非表示にします。