やりたいこと
最初のアクセスのみモーダル処理を実行させて、それ以降はタブを閉じるまでモーダル処理は実行させないようにします。
方法はいくつかありますが、この記事ではJavaScriptでのやり方を書いていきます。
▼ 簡単ですが以下が手順となります。
- セッションの取得
- セッションが保存されているのかを条件分岐で判定
- セッションがnullだったらモーダル処理。その後セッションの保存。
(※セッションを保存をすることで「null」でなくなります。つまりモーダルの処理はされません。)
文字での説明だけでは理解が難しいので、実際の記述を見てみましょう。
サンプルコード
//セッションの値を取得して変数「session」に保存
var session = sessionStorage.getItem("sessionOpened");
//「session」がnullだったら実行
if (session == null) {
//モーダル表示の記述はここに書く。以下サンプルモーダルコード。
$(function() {
$('.sampleM_btn').on('click', function() {
$('.sampleM').fadeIn();
return false;
});
$('.sampleM_CloseBtn').on('click', function() {
$('.sampleM').fadeOut();
return false;
});
}); //モーダル記述ここまで
//セッションを保存する(タブが閉じるまで保存される)
sessionStorage.setItem("sessionOpened", "keepWord");
}
今回は条件分岐で「null」の場合にモーダルを表示させましたが、モーダル以外の処理もできるかと思います。
臨機応変に書き換えて使っていただけたらと思います。