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

8月 16, 2023

モーダルウインドウを開くコマンドに下記を追加
　モーダルウインドウが開かれるとブラウザに履歴を残す／登録する

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;
    }
});

あと、モーダルを閉じるコマンドにコレも追加しとく
　履歴が＋１より増えない　たぶん

window.history.back();

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

History - Web API | MDN

このブログの人気の投稿

＞方法: コンポジティングを使用するレンダリング: 通常通りにシーンをレンダリングします。コンポジティング: コンポジティングノードを使用して、レンダリング結果を左右反転させることができます。「コンポジティング」タブに移動し、「Use Nodes」を有効にします。「Image」ノードを追加し、レンダリング結果を接続します。「Transform」ノードを追加し、X軸のスケールを-1に設定します。最後に「Composite」ノードに接続します。コンポジティングノードでの反転のしかたを初心者にもわかるように詳しく教えて . GPT-4o mini Blenderのコンポジティングノードを使用して画像を左右反転させる方法を、初心者向けに詳しく説明します。以下の手順に従ってください。ステップ1: シーンをレンダリングするシーンを作成: Blenderでシーンを作成し、レンダリングしたいオブジェクトを配置します。レンダリング: F12キーを押してシーンをレンダリングします。レンダリングが完了すると、画像が表示されます。ステップ2: コンポジティングタブに移動コンポジティングタブを開く: 上部のタブから「コンポジティング」を選択します。ノードを使用する: 「Use Nodes」にチェックを入れます。これにより、ノードエディタが表示されます。ステップ3: ノードを設定するレンダー結果ノードを追加: 右クリックして「Add」メニューを開き、「Input」から「Render Layers」を選択します。これがレンダリング結果を取得するノードです。変換ノードを追加: 再度右クリックして「Add」メニューを開き、「Distort」から「Transform」を選択します。これが画像を変換するためのノードです。コンポジットノードを追加: もう一度右クリックして「Add」メニューを開き、「Output」から「Composite」を選択します。これが最終的な出力ノードです。ステップ4: ノードを接続するノードを接続: 「Render Layers」ノードの出力（右側の出力ポイント）を「Transform」ノードの入力（左側の入力ポイント）に接続します。「Transform」ノードの出力を「Composite」ノードの入力に接続します。ステッ...

このブログを検索

TAGO.OK

prettify.css