離脱確認モーダル付きパンくず

<div class="d03-14-10-stage">
          <nav class="d03-14-10-bc" aria-label="パンくずリスト">
            <a href="#" class="d03-14-10-leave" onclick="return false">商品管理</a>
            <span class="d03-14-10-sep">›</span>
            <a href="#" class="d03-14-10-leave" onclick="return false">在庫一覧</a>
            <span class="d03-14-10-sep">›</span>
            <span class="d03-14-10-current">削除確認</span>
          </nav>
          <div class="d03-14-10-modal-wrap">
            <div class="d03-14-10-modal">
              <p class="d03-14-10-modal-title">入力内容を破棄しますか?</p>
              <p class="d03-14-10-modal-body">削除確認画面から移動すると、選択内容は保存されません。</p>
              <div class="d03-14-10-modal-btns">
                <button type="button" class="d03-14-10-cancel">キャンセル</button>
                <button type="button" class="d03-14-10-leave-ok">移動する</button>
              </div>
            </div>
          </div>
        </div>

.prev.d03-14-10{padding:0;display:block}
        .d03-14-10-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:24px}
        .d03-14-10-bc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px}
        .d03-14-10-bc a{color:#475569;text-decoration:none;font-weight:600}
        .d03-14-10-bc a:hover{color:#dc2626}
        .d03-14-10-sep{color:#94a3b8;font-size:12px}
        .d03-14-10-current{color:#0f172a;font-weight:700}
        .d03-14-10-modal-wrap{
          position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          background:rgba(15,23,42,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:5;
        }
        .d03-14-10-stage.show-modal .d03-14-10-modal-wrap{opacity:1;visibility:visible}
        .d03-14-10-modal{
          background:#fff;border-radius:12px;padding:20px;width:82%;max-width:230px;
          box-shadow:0 16px 32px rgba(0,0,0,.2);
          transform:translateY(10px) scale(.96);opacity:0;transition:transform .25s ease,opacity .25s ease;
        }
        .d03-14-10-stage.show-modal .d03-14-10-modal{transform:translateY(0) scale(1);opacity:1}
        .d03-14-10-modal-title{margin:0 0 6px;font-size:13.5px;font-weight:800;color:#0f172a}
        .d03-14-10-modal-body{margin:0 0 14px;font-size:11.5px;color:#64748b;line-height:1.5}
        .d03-14-10-modal-btns{display:flex;gap:8px;justify-content:flex-end}
        .d03-14-10-modal-btns button{
          border:none;border-radius:8px;padding:7px 13px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;
        }
        .d03-14-10-cancel{background:#f1f5f9;color:#475569}
        .d03-14-10-cancel:hover{background:#e2e8f0}
        .d03-14-10-leave-ok{background:#dc2626;color:#fff}
        .d03-14-10-leave-ok:hover{background:#b91c1c}

(function(){
        var stage=document.querySelector('.d03-14-10-stage');
        if(!stage)return;
        stage.querySelectorAll('.d03-14-10-leave').forEach(function(a){
          a.addEventListener('click',function(){
            stage.classList.add('show-modal');
          });
        });
        stage.querySelector('.d03-14-10-cancel').addEventListener('click',function(){
          stage.classList.remove('show-modal');
        });
        stage.querySelector('.d03-14-10-leave-ok').addEventListener('click',function(){
          stage.classList.remove('show-modal');
        });
      })();