0

だから、私は最初の本格的なWeb サイトを開発しています。次のシナリオを実装したいのですが、ガイダンスとアドバイスが必要です。<input type="submit">私のウェブページにボタンがあります。ユーザーがクリックすると、すべてのページ コンテンツの上に表示される HTML コンテンツが開きます (中央に配置されますが、現時点ではその詳細は気にしません)。Facebook で写真を表示する方法と非常によく似た動作をする必要があります。ユーザーが写真のサムネイルをクリックすると、写真がすべてのページ コンテンツの上に表示されます。

さて、私はこれをすでに実装し
ましたが、特にサイトのメンテナンスについて考えると、少し不器用に見えるので、私のアプローチはお勧めできません。絶対に配置され、折りたたまれて、コンテナーとして機能します。ボタンをクリックすると、コンテンツが入力され、状態が折りたたみから表示に変更されます。<div><body><div>

この効果と意見を達成するために使用される標準的な方法を誰かが共有したい場合、私は非常に感謝しています. これには AJAX と jQuery を多用する必要があると推測しています (前述の設計では純粋な JavaScript を使用しました)。コード サンプルとリソースを探しています。どうもありがとう。

4

4 に答える 4

2

探しているのはモーダル ダイアログであり、ポップアップではありません。ポップアップは新しいウィンドウですが、モーダルは、前方のコンテンツを強調するために背後のページをブロックする HTML 要素です。

1 つの方法は、 を<div>本体 (通常は本体の末尾) に追加し、絶対位置に配置することです。その div には、ビューポートに合わせてストレッチするための上下左右のゼロがあります。その div 内には、親のビューポートに適合する div に対して相対的に絶対的に配置された別の div があります。配置は自由ですが、通常は次の式を使用して中央に配置されます。

center = (total length - modal length)/2

内容はあなた次第です。後で表示できるように、コンテンツを既にロードして DOM に非表示にすることができます。または、必要に応じて AJAX 経由でコンテンツをロードします。

jQueryには、jQueryUI スイートに既にモーダル プラグインがあり、これを使用して、追加およびカスタマイズするための多くのメソッドがパックされています。

于 2012-05-27T21:01:55.487 に答える
0

position: absolute;ポップアップボックスを使用して、画面上の好きな場所に設定できます。次にz-index、それをコンテンツの上に置くために使用します。

ここにデモがあります: http://jsfiddle.net/e6BEu/

于 2012-05-27T21:02:41.693 に答える
0

あなたが探しているのはLightboxのようなものではないでしょうか? 少なくともいくつかのアイデアを提供できます。

編集：または、テキストなどをサポートするこれ。

于 2012-05-27T21:04:12.313 に答える
0

そこにはたくさんのアプローチがあります。jQuery UI (http://jqueryui.com) を使用できます。しかし、私は Twitter の Bootstrap が取っているアプローチが好きです: http://twitter.github.com/bootstrap/javascript.html#modals

これは非常にクリーンなセットアップで、AJAX を介してコンテンツを読み込むことができます。プラグインはたくさんあるので、すべてを自分で作成する必要はありません。また、ブートストラップ モーダル プラグインはスタンドアロンなので、これをそのまま使用できます。

私はそれを使用して、AJAX リクエストでコンテンツ div を生成するのが好きです。

于 2012-05-27T20:59:38.000 に答える