Question

我有一个文本框和一个隐藏的div，它将显示为弹出窗口。我想当用户点击文本框时，隐藏的div弹出窗口将显示在文本框的位置。所以，我使用代码：

var p = $("#listCats");
var position = p.offset();
$('#category').css({"left" : position.left, "top" : position.top});

listCats ：文本框的ID

类别：隐藏div的ID，它也是css

#category {
        width: 508px;
        min-height: 135px;
        padding: 0.4em;
        position: absolute;
        border: 2px solid rgb(124, 113, 113);
        background: #fff
}

然而，隐藏的div弹出窗口并没有像我预期的那样显示，而是：

enter image description here

我做错了吗？

编辑：完整的隐藏div如下：

<div id="category" style="display:none;">
        <s:iterator value="categoryMapList">
            <div class="cat_label_title parentCat" id="<s:property value="key.id" />">
                <s:property value="key.name" />
                <div class="subCat">
                    <s:iterator value="value" var="category">
                        <label >
                            <a  href="#" class="cat_label_item catItem" name="catItem:<s:property value="key.name" />, <s:property value="#category.name" />"
                                id="catItem:<s:property value="#category.id" />">
                                <s:property value="#category.name" />
                            </a>
                        </label>
                    </s:iterator>
                </div>
            </div>
        </s:iterator>
    </div>

Answer 1

您可能想要检查类别容器是否绝对位于具有相对定位的另一个div中。

这意味着顶部左侧是相对于父级的。

因此，通过获取父级的页面偏移量，然后将其设置为子级，您可以将其从父级而不是父级中推出。

同时检查一下：https://stackoverflow.com/a/3202038/1060487

Answer 2

jquery.css最后需要一个带px的字符串。在你的情况下：

$('#category').css({"left" : position.left + 'px', "top" : position.top + 'px'});

Answer 3

HTML：

<input type="text" name="txt" id="listCats">

<div id="category"><p>Hello</p></div>

CSS：

#category {
  width: 508px;
  min-height: 135px;
  padding: 0.4em;
  position: absolute;
  border: 2px solid rgb(124, 113, 113);
  background: #fff;
  display: none;
}

jQuery的：

var $inp = $("#listCats"),
$msg = $("#category"),
pos = $inp.offset();

$inp.bind("click", function () {
  $msg.css({
    "left": pos.left,
    "top": pos.top + $inp.height()
  }).show();
});

工作小提琴：http://jsfiddle.net/darshanags/MEgrp/12/

jQuery弹出窗口未显示在所需位置

3 个答案: