0

2列のテーブルがあります。ユーザーが列 2 の任意のセルをクリックすると、「そのセル」に div がオーバーレイされ、絶対位置で、クリックされたセルに左上が揃えられる必要があります。

どうすればそれができますか。これは私がこれまで行ってきたことです（動作コードではありません）

var $divOverlay = $('#divOverlay');
        var bottomWidth = $(this).css('width');
        var bottomHeight = $(this).css('height');
        var rowPos = $(this).position();
        bottomTop = rowPos.top;
        bottomLeft = rowPos.left;
        $divOverlay.css({
            position: 'absolute',
            top: bottomTop,
            right: '0px',
            width: '80%',
            height: '500px'
        });

フィドル: http://jsfiddle.net/v4dXn/14/

4

3 に答える 3

0

これが私のアプローチになります。クラスが最初に必要な位置と左のオフセットを持っていることに注意してください。また、必要に応じてそれを要素に追加するだけです。

$('td').on('click', function(){
    var $this = $(this),
    $divOverlay = $('#divOverlay');

    $divOverlay.css({
        height:$this.height(),
        width:$this.outerWidth()
    }).appendTo($this).show();

});

フィドル

ノート -

outerWidth()ある種のレスポンシブ デザインを使用している場合に、ハード幅値の代わりにセルにパディングを使用している場合にのみ必要です。

于 2013-07-16T19:42:36.377 に答える
0

この場合、要素は同じ親を共有していないため、 .offset代わりに を使用する必要があると思います。http://api.jquery.com/offset/.position

また、次を追加します。left : bottomLeft

于 2013-07-16T19:45:53.480 に答える