JqueryでsessionStorageを保持して、保持しているかしていないかで条件を変更しようと考えていますが
セッション保持の判定条件が起動しないので、どなたかご教授いただければと存じます。
そもそもやりたいこと
・指定値までスクロールしたらモーダルを表示する。一度スクロールしてモーダルが表示された場合は、2回目から
表示させたくはないので、sessionStorageを保持して対応しようと考えました。
sessionStorageが保持されていれば、何も表示せず、
保持されていないかつ指定値までスクロールしたらモーダルを表示する。ようにしたいです。
※セッション以外でやりたいことが対応可能であれば、その点についてもご教授いただければと存じます
現状の状態
sessionStorageの保存まではできたのですが、セッションが保持されているかの判定状態の部分のイベントがそもそも起動していません。 if (str.length == 0) 配下の部分です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> $(function () { $(window).scroll(function () { var num = 1; sessionStorage.setItem('access_count', num); window.sessionStorage.setItem('access_count', num); var str = sessionStorage.access_count = num; console.log(str); 以下からイベントが起動しない if (str.length == 0) { if ($(this).scrollTop(str) > 110) { $('#modal-sample').modal('show'); console.log("モーダルを表示"); } else { console.log("セッションあり"); } } }); }); </script> <style> </style> </head> <body> <div> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> </div> <!-- 1.モーダルを表示する為のボタン --> <button class="btn btn-primary" data-toggle="modal" data-target="#modal-sample"> モーダルを表示 </button> <div class="modal fade" id="modal-sample" tabindex="-1"> <div class="modal-dialog"> <!-- 3.モーダルのコンテンツ --> <div class="modal-content"> <!-- 4.モーダルのヘッダ --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modal-label">モーダルのタイトルを表示する</h4> </div> <!-- 5.モーダルのボディ --> <div class="modal-body"> コンテンツの本文 </div> <!-- 6.モーダルのフッタ --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー