別のページから遷移してアクセスした際にモーダルが開かない

Question

実現したいこと

１．ページにアクセスした場合に、モーダルダイアログでポップアップを表示したい
２．かつ、該当ページへのアクセスは同サイト内のリンクからである（トップページではない）

下記は挙動確認済です

・該当ページのURLをブラウザに打ち込んで直接アクセスした場合
・（上記と意味的には同じですが）該当ページへのリンクを"別ページ/ウィンドウ/タブで開いた場合"

発生している問題・エラーメッセージ

同じタブ内（ウィンドウ内）リンクでアクセスした場合、ポップアップの表示がされません。

該当のソースコード

<div class="bg_onetime_popup">
    <div class="onetime_popup">
        <div class="onetime_popup_title">
            <!--<span class="onetime_popup_title_close"></span>-->
            <span style="font-size:3rem;"><i class="fas fa-exclamation-circle"></i></span><br>ご注意ください
        </div>
        <div class="onetime_popup_content">
            <p>記入漏れ・記入間違いが増えています。</p>
			<label class="onetime_popup_title_close">確認しました</label>
        </div>
    </div>
</div>

body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 40%;
    background-color: #F5F5F5;
    border-radius: 5px;
}

.onetime_popup_title {
    position: relative;
    padding-top: 0.8em;
    margin: 0px;
    color: #5D653B;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
}


.onetime_popup_title_close {
    position: relative;
    display: inline-block;
    background: #A5AF7E;
    color: #fff;
    border-radius: 0px 0px 5px 5px;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    line-height: 3rem;
    width: 100%;
    text-align: center;
    font-weight: bold;
}

.onetime_popup_content {
    text-align: left;
    color: #000;
}

.onetime_popup_content p {
    font-size: 0.8rem;
    line-height: 1.7;
    padding: 20px;
}

window.addEventListener('load', function() {
    if(!sessionStorage.getItem('disp_popup')) {
        sessionStorage.setItem('disp_popup', 'on');
        const body = document.querySelector('body');
        const bgPopup = document.querySelector('.bg_onetime_popup');
        const popup = document.querySelector('.onetime_popup');
        const popupTitleClose = document.querySelector('.onetime_popup_title_close');
        body.classList.add('open_popup');

        bgPopup.addEventListener('click', function() {
            closePopup();
        });
        popup.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        popupTitleClose.addEventListener('click', function() {
            closePopup();
        });

        function closePopup() {
            body.classList.remove('open_popup');
        }
    }
}, false);

試したこと

javascriptに関しては全くの無知なのでお手上げ状態です。
なぜ新規ウィンドウで開いた（or直接アクセスした場合）のみ問題なくポップアップが表示されるのかの理由も全くわからないです。
直接アクセスでの挙動が確認できていること・デザインの崩れ等はないことから、html・CSSではなくjavascriptになにか要因があるのではと考えています。

いっそのこと他サイトのテンプレートを参考に差し替えようと探したのですが、
大体のモーダルポップアップのテンプレートが「ボタンを押した場合に表示」等のもので、表示条件が異なる為それも出来かねている状態です。

お手数をおかけしますが、ご教示よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

・該当のページへのリンクをtarget="_blank"にするのは運用上非現実的なのでそれは避けたいと思っています。
・現在、該当リンクのtarget指定はありません。

こちら（https://migi.me/javascript/popup-modal-window-only-once/）のサイトを参考にさせていただいています。
※ほぼコピペになります。

Answer 1

sessionStorage を使用しているのは、参考サイトの「ページを訪問する度に一度だけポップアップ表示したい」サンプルなので

『同じタブ内（ウィンドウ内）リンクでアクセスした場合』というのが、タブを開いてから1度でもsessionStorage.setItem('disp_popup', xxx)した状態（例えば既に同一タブで一度だけポップアップを表示済み）でのアクセスであれば
sessionStorageの仕様通り＆サンプルコードの意図通り……ということになります。

もしこの挙動（一度だけ）が質問者さんの要求と異なるのであれば、サンプルコードから改変が必要になります。

そうではなく「要求通りではあるが、同一タブ内で初回アクセスにもかかわらず一度もポップアップが表示されない」であれば
例えば該当ページ以外でもsessionStorage.setItem('disp_popup', xxx)している…など、質問で挙げられたコード以外に別の要因があるかもしれません。

---

参考
https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage

sessionStorage に保存されたデータはページのセッションが終了するときに消去される

文書がブラウザー内の特定のタブに読み込まれるたびに、固有のページセッションが作成され、その特定のタブに割り当てられます。そのページセッションは特定のタブでのみ有効です。

ページセッションはタブやブラウザーが開いている限り続き

新しいタブやウィンドウでページを開くと、最上位の閲覧コンテキストの値で新しいセッションが作成されます

2024/08/23 07:50 追記

質問者さんは『javascriptに関しては全くの無知』とのことなので
これ以上の解決は独力では難しいかもしれないですが、一応調査のための手順だけ記載しておきます。

モダンなPCブラウザであれば、開発者ツール（F12キーとかで表示されるやつ）で sessionStorage の中身を監視したりできます。
たとえば以下のような手順で問題のキー＝disp_popupが想定外のタイミング（手順の①）で設定されていないか確認することで、問題箇所の特定に繋がるかもしれません。
（というか、現状の情報からするとこの辺りで設定している…くらいしか怪しい所がなさそうです）

1. 新しいタブで無関係なページ（例えば空白のページ）を開く
2. 開発者ツール > Storage用のタブを開いておく
3. 手前のページを開く
4. 開発者ツールでStorage確認①
   ※この時点では当該ホスト（URLの前半部分）の sessionStorage 内にキー＝disp_popupのデータが存在していないはず
5. 当該ページを開く
   初回アクセスなのでダイアログが表示されるべき
6. 開発者ツールでStorage確認
   ※キー＝disp_popupのデータが追加されている

Comments

[alpaca-no]

早速のご回答ありがとうございます。

ご指摘の通り、
＞「要求通りではあるが、同一タブ内で初回アクセスにもかかわらず一度もポップアップが表示されない」
の方にあたります。
（※別端末等で試した場合も同症状でした。）

一旦、今回実装しようとしているモーダルのコード以外の部分にも要因がないかちょっと調べてみます。
ありがとうございます！

[pecmm]

念のため確認ですが、以下のような手順でも間違いなく問題が再現しますか？

①新規タブで直接表示（問題なし）
1. ブラウザの新しいタブで当該ページを直接開く
2. ダイアログが表示される

②新規タブで直前のページから遷移（問題あり）
1. ブラウザの新しいタブで手前のページを開く
2. リンクから当該ページへ遷移
3. ダイアログが表示されない

[utm.]

仕組みに興味が無いのであればsessionStorage.setItem('disp_popup', 'on');を削除すれば良いです。

[alpaca-no]

>pecmm様
ご返信ありがとうございます。
おっしゃるとおり、
①の場合→問題なし（表示される）
②の場合→問題あり（表示されない）
となりました。

[alpaca-no]

＞utm.様
ご回答ありがとうございます。
ひとまず応急処置として、sessionStorage.setItem('disp_popup', 'on');を削除しました。
（アクセスの度に表示）

ご教示ありがとうございます。

[pecmm]

一応ですが、調査のための手順を追記しました。

Answer 2

モーダルの処理はdialogがよいでしょう。
仕様としては新規で開くor別ページから飛んでくる場合モーダルを表示し、リロードやページバック、ページ内リンクなどの場合はモーダルを表示しないということでよろしいですか？

<style>
dialog {
  background-color: #F5F5F5;
  border: solid 0;
  border-radius: 20px;
  padding:0;
}
dialog:focus{
 outline: none;
}
dialog::backdrop{
  background-color: rgba(0, 0, 0, 0.7);
}
.onetime_popup_title {
    color: #5D653B;
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
}
.onetime_popup_title_close {
    display: inline-block;
    background: #A5AF7E;
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 3rem;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.onetime_popup_content p {
    font-size: 0.8rem;
    line-height: 1.7;
    padding: 20px;
}
</style>
<script>
const nav=performance.getEntriesByType("navigation")[0].type;
window.addEventListener('DOMContentLoaded', ()=>{
  if(nav=="navigate"){
    document.querySelector('.onetime_popup').showModal();
  }
});
document.addEventListener('click',({target})=>{
  if(target.matches('.onetime_popup_title_close')){
    target.closest('dialog').close();
  }
});

</script>
<dialog class="onetime_popup">
<div class="onetime_popup_title">
<span style="font-size:3rem;"><i class="fas fa-exclamation-circle"></i></span><br>ご注意ください
</div>
<div class="onetime_popup_content">
<p>記入漏れ・記入間違いが増えています。</p>
<label class="onetime_popup_title_close">確認しました</label>
</div>
</dialog>