ブラウザの「戻るボタン」を押した時、ポップアップを表示させる機能を実装しました。
#contact や #top のページ内のアンカーリンクを押した際もポップアップが表示されてしまうため
アンカーリンクでは反応しないようにする解決法がわからず質問させて頂きました。
下記がPOP UP表示で使用しているコードになります。
<!-- ポップアップ --> <div class="popup-area"> <i class="fas fa-exclamation-triangle icon"></i> <p>ブラウザの「戻る」が実行されました。</p> <button class="close-btn">閉じる</button> </div> <!-- 古いブラウザ対応 --> <script src="<ディレクトリ>/jquery.history.js"></script> <script> "use strict"; //ポップアップ非表示の判定 let popAppend = false; //履歴の追加 let hash = location.hash; if(hash != '#back') { history.pushState(null,null,location.href); history.replaceState(null,null,'#back'); } //設定したハッシュタグが消えたら実行 window.addEventListener('popstate',(e) => { if(location.hash != "#back" && popAppend === false) { $('.popup-area').fadeIn(); $('body').append($("<div>", {class: 'cover-eml'})); popAppend = true; if(popAppend) { $('body').on('click', '.cover-eml' , function() { deleteElm(); popAppend = false; }); } } }); //バナー削除 $('body,.close-btn').on('click', '.close-btn', function() { deleteElm(); popAppend = false; }); function deleteElm() { $('.cover-eml').fadeOut(); $('.cover-eml').remove(); $('.popup-area').fadeOut(); } </script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。