巨大な JavaScript ライブラリを使わずに Netflix スタイルの iframe オーバーレイを作成するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/99640

  •  01-07-2019
  •  | 
  •  

質問

別のポップアップウィンドウではなく、リンクを使用してオーバーレイを開こうとしています。このオーバーレイは、画面全体がクリックされるのをブロックする半透明の div レイヤーで構成されている必要があります。この時点でスクロールを無効にすることも目指します。メイン ページのどこにいても、リンクをクリックすると、オーバーレイが画面の X 原点と Y 原点の中心に配置される必要があります。このオーバーレイ div 内には、3 サイズのコンテンツをロードできるように iframe を設定する必要があります。­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

役に立ちましたか?

解決

私が書いた古い JS ライブラリをチェックしてみてください。 サブモーダル.

理解しやすく、修正しやすい。町に行く ;)

改造したら、使用してください 縮小する サーバー上の gzip と組み合わせて使用​​します。ライブラリのサイズは非常に小さくなります。

他のヒント

シャドーボックス インライン「ポップアップ」用の優れたスクリプトです。これは、通常の JS ライブラリ (jQuery、プロトタイプなど) を使用する場合はどれでも動作します。また、単独でも動作します。非常に包括的なスキニング システムを備えているため、ソース コード自体に手を加えることなく外観を調整できます。
また、これは、私が試した中で、通常のすべてのブラウザで確実に動作する唯一のスクリプトです (数十あります)。

スクロールが無効になるわけではありません (通常のページ背景のスクロールは暗いオーバーレイを通して見ることができます) が、「ポップアップ」はいずれの場合も画面上に固定されたままになります。

http://onehackoranother.com/projects/jquery/boxy/

jQuery.boxy も優れた軽量モーダル ダイアログ プラグインです。

私が普段使っているのは シックボックス このために。これは非常にうまく機能しますが、ユーザーが JS を有効にしていない場合はうまく動作しません。

jQuery を使用しますが、Google からロードできます。 http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js キャッシュの恩恵を受けることもできるかもしれません。

JavaScriptを取得する 内線 図書館。モーダルなオーバーレイの機能があります。

ThickBox (もう開発されていません) は、非常にうまく動作するように見えるこのライブラリに私を導きました。

http://ファンシーボックス.net

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top