Facebook で画像のサムネイルをクリックすると、オーバーレイに完全な画像が読み込まれることがわかりました。このツールが何であるかを正確に知りたいと思っていました。
私が理解している限り、オーバーレイが画面を占有し、スクロールバーがオーバーレイのサイズに応じて調整されていることがわかりますが、ページ自体は調整されていません。 jQueryモーダルの場合。Eric Martin の Simple modal のようなモーダルも調べましたが、うまくいきませんでした。
この Facebook のような効果を実現できるプラグインを知っている人はいますか?
Facebook は、jQuery モーダルのようなすぐに使えるプラグインを使用するのではなく、物事を行うために独自のクライアント側ライブラリを作成したと思います。
動作を観察するだけで、スクリプトに期待する
(a) ウィンドウのサイズをチェックし (ポップアップがビューポートを埋めるために縮小されるため)、次に (b) 画像自体のサイズをチェックします。
...そして、コメントや広告などの余地を残した後、オーバーレイに含まれる div を設定するサイズを正確に把握します。次に、画像自体が使用可能なスペースに収まるようにスケーリングされます。
オーバーレイ自体の内部にスクロールバーを配置することに関しては、 css を使用して固定サイズ (つまり、高さ/幅を設定) を持つ任意の要素でこれを実現できますoverflow: auto;。コンテンツが要素のサイズよりも大きい場合、そのスタイルのブロック要素はスクロールバーを表示します。