DIV的相对定位答案

【问题标题】：Relative Positioning of DIVDIV的相对定位
【发布时间】：2008-10-28 10:15:46
【问题描述】：

有一个名为“dvUsers”的 div。有一个锚标签“lnkUsers”。

当点击anchortag时，div必须像弹出式div一样在其下方打开。

此外，div 的相对位置应在窗口调整大小时保持不变。如何使用 javascript/jquery 做到这一点？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

也许您应该寻找一个预制脚本，例如 overLIB：http://www.bosrup.com/web/overlib/!-)

【讨论】：

【解决方案2】：

我的偏好是将这两个都放在父 div 中，如下所示：

<div id="container">
    <a id="lnkUsers" href="#">Users</a>
    <div id="dvUsers" style="display: none;">
        <!-- user content... -->
    </div>
</div>

这些元素的 CSS 是：

#container{
    /* ensure that #dvUsers is positioned relatively to this element */
    position: relative;
}
#dvUsers{
    position: absolute;
    /* this value should be based on the font-size of #lnkUsers */
    top: 30px;
    left: -10px;
}

这可确保 div 相对于链接正确定位。（为了这个问题，我假设父 div 是“文本对齐：左”或浮动）

javascript 看起来像这样：

$(function(){
    $('#lnkUsers').click(function(){
        $('#dvUsers').slideToggle();
    });
});

【讨论】：

【解决方案3】：

$(document).ready(function(){ $("#lnkUsers").click(function(){ $("#dvUser").show("slow"); });

style="display: none" 应该首先应用于 dvUser 以使其不可见。

【讨论】：

【解决方案4】：

你可以使用jQuery插件PositionCalculator。

HTML：

  <p><a class="lnkUsers" href="javascript:void(0)">Users Link1</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 2</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 3</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 4</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 5</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 6</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 7</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 8</a></p>
  <p><a class="lnkUsers" href="javascript:void(0)">Users Link 9</a></p>

  <div id="dvUsers" style="display:none; position:absolute; padding:10px; background:rgba(0,0,0,0.8); color:#ffffff">
    I am the popup. <b>Click me to close</b>
    <div class="dynamicInfo"></div>
  </div>

JavaScript：

jQuery(function($) {
    var $popup = $('#dvUsers');
    var $infoField = $popup.find('.dynamicInfo');

    function showPopup(event) {

        // set content
        $infoField.text('clicked link: ' + $(this).text());

        // reset position
        $popup.show().css({top: 0, left: 0});

        // calculate new position
        var calculator = new $.PositionCalculator({
            item: $popup,
            itemAt: "top left",
            target: this,
            targetAt: "bottom left",
            flip: "both"
        });
        var posResult = calculator.calculate();

        // set new position
        $popup.css({
            top: posResult.moveBy.y + "px",
            left: posResult.moveBy.x + "px"
        });

        // window resize handler
        $(window).off('resize.dvUsers');
        $(window).on('resize.dvUsers', function(event) {
            $popup.css({top: 0, left: 0});
            var newResult = calculator.resize().calculate();
            $popup.css({
                top: newResult.moveBy.y + "px",
                left: newResult.moveBy.x + "px"
            });
        });
    }

    // add click handler for show and hide
    $('.lnkUsers').on('click', showPopup);
    $popup.on('click', function() {
        $popup.hide();
        $(window).off('resize.dvUsers');
    });
});

这里是example at JSBin

【讨论】：