モーダルボックスを開くと、ブラウザーの履歴が変更されますか？
クリックしてモーダルボックスで開くことができる画像（ [このプラグイン のように）を表示し、タッチデバイスでピンチしたときにズームします（ このデモ のように）。
実際のmodalboxは次のとおりです。
画面の右上に画像と簡単なナビゲーションが表示されます。ナビゲーションには、左、右、閉じるボタンがあります。
モバイルデバイスでサイトを表示すると、一部のユーザーがmodalboxを閉じたいときにブラウザーの戻るボタンを押すことに気づきました。これにより、ブラウザがサイトから抜け出します。ナビゲーションの背景色は既に白（邪魔にならないようにするため）から暗い色に変更しています。
ユーザーエクスペリエンスの観点から、ユーザーが戻るボタンを押した場合に備えて（モーダルボックスを開いたときに）追加のブラウザー履歴状態をプッシュすることをお勧めしますか？
（例：www.example.com/#img1）
モーダルボックスにアプローチするための考えや一般的な方法はありますか？
はいはい
ほとんどのユーザーにとって、これは単なる別のページになります。そして概念的には、彼らは正しいでしょう、彼らは技術的な部分について何も知りません、彼らはクリックするか何かをすることによって彼らが異なるコンテンツで提示されることを知っているだけです。もちろん、これは非常に一般的な（そしてかなり研究された）状況です。
NNGから オーバーレイの過剰使用
また、ユーザーがターゲットアクションを完了しないことを決定した場合にどうなるかを検討する必要もあります。もちろん、ライトボックスを閉じる明示的な方法を含める必要がありますが、別の一般的なユーザー戦略は、元の画面に戻そうとしてブラウザの[戻る]ボタンをクリックすることです。デフォルトでは、ウェブブラウザはオーバーレイを個別のページのように扱いません。そのため、ユーザーは[戻る]ボタンをクリックすると、下にある画面ではなく、その画面の前のページに移動します。分析で、ユーザーがオーバーレイに到達した後に[戻る]をクリックしたことが示される場合は、[戻る]ボタンを調整して、オーバーレイが表示されたときにブラウザーの履歴の前のページに移動するのではなく、[戻る]ボタンでライトボックスを閉じることを検討してください。
オーバーレイとライトボックスは、前のページの上に置かれた新しいページを伝えることを意図した設計です。したがって、ユーザーがこれらを個別のページとして認識し、ブラウザの[戻る]ボタンで元のページに戻ることを期待しても、当然のことです。悲しいかな、テスト中、テストされたサイトでユーザーが開始したオーバーレイの大部分は、被験者がブラウザの戻るボタンをクリックしても閉じず、オーバーレイされたページを過ぎて戻ってきました。
戻るボタンの混乱-親ページに戻ろうとしてユーザーがブラウザーの戻るボタンをクリックすることは問題です。私の個人的な経験では、この問題は親ページがかなり淡色表示されているページでより一般的であり、ユーザーはそこから移動したように感じます。これを支援するには、明るいオーバーレイまたは透明なオーバーレイを使用します。
つまり、戻るボタンの問題をテストしたほとんどの人がこの一般的な動作を発見しました：ユーザーは戻るボタンを使用して前の状態に戻りますが、それは問題ありません。
一部のサイトは、モーダル（またはAJAXロードされたページ））のコンテンツがあり、ユーザーがナビゲーションのあるフォトギャラリーおよびユーザークリックして戻ると、彼女は...最初に送信されます。これについて考えてください：ユーザーは要素51にいて、要素50を見たいと思っています...そして彼女は最初に送信されます!!!残念ながら、これは非常に一般的であり、おそらく適切な方法よりも一般的です。そのため、ナビゲーションを常に自分の履歴を持つ論理パスとして扱うようにしてください。ユーザーが戻るボタンを使用して以前の状態に戻る場合は、それを否定するべきではなく、代わりにユーザーがそれを達成するのを助けるべきです。
回答をありがとうデヴィン。この回答を投稿して、誰かに役立つ場合の実装方法を説明します。
最終的に、各画像ではなく、モーダルボックスに履歴状態を追加しました。
こちらです：
１。ユーザーはサイトにいます。
[example.com]
２。ユーザーが画像をクリックすると、モーダルボックスが開きます。画像の「alt」属性を使用して、追加のブラウザー履歴状態がアンカーとして追加されます。 （ハッシュはid属性に関連しています。これを実装する正しい方法を確認する必要があります）
[example.com> example.com/#Building_plan]
３。ユーザーは右矢印をクリックして次の画像をロードします。アンカーは新しい画像の「alt」に置き換えられます。
[example.com> example.com/#Building_section]
4aユーザーが閉じるボタンをクリックした。ブラウザは履歴ステップに戻ります。モーダルボックスが閉じます。
[example.com> example.com/#Building_section]
4bユーザーがブラウザの戻るボタンをクリックした。モーダルボックスが閉じます。
[example.com> example.com/#Building_section]
私の場合、これは理にかなっていると思います。ユーザーはブラウザの進むボタンを押して、モーダルボックスを再び開くことができます。
2から3に余分な状態をプッシュするのではなく、意図的に置き換えました。ここで重要なのは、ページとモーダルボックスです。各画像に余分な状態を追加すると、不要な状態が多くなりすぎます。
[example.com/#Modal_box]を追加するだけで、状態を2から3に置き換える必要はありませんが、現在の画像に関する追加の（有用な）情報が得られると思います。
画像だけにモーダルボックスを使用していることに注意してください。ページ全体をロードするのは別の話になります。