投稿

ラベル(CSS)が付いた投稿を表示しています

モーダルウィンドウをブラウザ戻るボタンで閉じる javaScriptのaddEventListener

Quick Edit Pencil
モーダルウインドウを開くコマンドに下記を追加
 モーダルウインドウが開かれるとブラウザに履歴を残す/登録する
history.pushState(null, null, location.href);

ウチの場合はコレでイケた
window.addEventListener('popstate', function (e) {
    if (/modalOn/.test(document.body.classList)) {
        alert('ブラウザバックを検知しました。');
        document.body.classList.remove('modalOn');
        let elm = document.querySelector('.modalOpen');
        elm.classList.remove('modalOpen');
        return;
    }
});

あと、モーダルを閉じるコマンドにコレも追加しとく
 履歴が+1より増えない たぶん
window.history.back();

とりあえず、入門的な感じ。かなり奥が深い。

History - Web API | MDN