1

わかりにくいタイトルで申し訳ありませんが、これ以上簡潔な説明はできません。

<div>私はリストを持っており、各リスト項目内には、次のjQueryを使用して非表示のothersiwseを開くリンクがあります:

$('a.showreranks').click(function () {
        $('body').append('<div class="overlay"></div>');
        $('#rerank_details').slideToggle(300);
        return false;
      });

rerank_detailsdiv の ID であり、showreranksすべてのリンクのクラスです。

これは、div の CSS です。

#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}

ご覧のとおり、開いた div は、開いたときに中央に配置されます。その後、クリックされたリスト項目に関連する情報が入力されますが、それについて心配する必要はありません。私が助けを必要としているのは次のことです-divを画面の中央に配置したくありません。代わりに、クリックされたリンクのすぐ下に配置したいと思います。ページ上に多数のリンクが上下に並んでいる可能性があり、垂直方向の距離が不規則である可能性があることに注意してください。どうすればこれを達成できますか?

4

3 に答える 3

3

これがあなたがやろうとしていることだと思います: http://jsfiddle.net/SO_AMK/r7ZDm/

于 2012-06-21T17:21:03.353 に答える
2

答えはすでに受け入れられていますが、おそらくこれはよりクリーンなバージョンです。アニメーションはすべて修正されています。

于 2012-06-21T17:45:21.313 に答える
1

DOMの通常のフロー内にある必要がない場合は、絶対位置とイベントオブジェクトを使用するだけです。

function(event){
  var box = //get a handle to box
  box.style.position = 'aboslute';
  box.style.left = event.page.x; 
  box.style.top = event.page.y;
}
于 2012-06-21T17:15:33.587 に答える