-2

ユーザー名にカーソルを合わせるか、このサイトの一番上のツールバーにあるStackExchangeの単語をクリックすると表示されるようなポップアップdivを実行しようとしています。

私はajaxコードなどを求めていません。それを配置する方法だけです。私はfirebugを使用してコードを調べましたが、x 250 y 500のような位置を指定していません。では、これらの人はどのようにしてユーザー名またはStackExchange文字のすぐ下にコードを表示させるのでしょうか。

4

4 に答える 4

1

Stackoverflowは明らかにJavaScriptを使用して、ポップアップの表示方法の効果を実現しています。小さなjQuery（$（'＃mydiv'）。show（100）;）がこれを行います）。次のように、隣接する兄弟セレクターでCSSのみを使用して、同様の効果を実現できます。

div {display: none;}

a:hover + div { display: block;}

'popup'要素の配置は、中央のページdiv内で行われ、マージンは「0auto」に設定されています。トップバーはこの要素内に配置され、幅は「100％」に設定され、位置は「相対」に設定されます。divの位置を相対として宣言すると、ページ全体ではなく、親要素を基準にして子要素を絶対的に配置できます。

絶対位置のポップアップdivをトップバーリンクの下に表示するには、divの「top」属性をトップバーdivのピクセルの高さに設定し、「right」属性を適切なピクセル値に設定してリンクの下に配置します。リンクがブロックレベルの要素であると仮定すると、このようにjQueryを使用して動的にこれを行うことができます。

var offset = $('#myLink').offset(); 

var newLeft = offset.x; 

var newRight = offset.y + $('#myLink').width(); 

$('#popup').css({

   left : newLeft,
   right : newRight
});
于 2012-10-24T14:05:07.867 に答える
0

彼らが行ったことは絶対的な位置です。要素をクリックまたはホバーすると、ポップアップが「表示なし」から「ブロックを表示」に変わります。ポジショニングはフロート（フロート左）によって制御されます。xの配置は、他の要素を基準にして行われます。この場合、ヘッダー要素の幅は960ピクセルで、margin：autoを使用して中央に配置されます。そのため、ポップアップはヘッダー要素の左側に表示されます。

于 2012-10-24T13:32:51.960 に答える
0

position: absolute実際のポップアップで使用しposition: relative、それを配置する親コンテナで使用します。そうすれば、実際のクリックイベントdivを配置するコンテナに配置できます。

于 2012-10-24T13:33:13.950 に答える
0

このフィドルを確認してください。それは役に立ちますか？

実際には、JavaScriptなしでそれを行うことができます。javascriptを使用することの目的はhide、ポップアップのを一時停止することです。

于 2012-10-24T13:37:56.133 に答える