0

ポップアップとして表示されるテキストボックスと非表示の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ポップアップは、期待どおりに表示されません。

ここに画像の説明を入力してください

私は何か間違ったことをしていましたか？

編集：次のように完全に隠された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>
4

3 に答える 3

1

カテゴリコンテナが、相対的な位置にある別のdiv内に絶対的に配置されているかどうかを確認することをお勧めします。

これは、左上が親を基準にしていることを意味します。

したがって、親のページオフセットを取得し、それを子に設定することで、親の下ではなく親から離れるようにプッシュします。

これもチェックしてください：https ：//stackoverflow.com/a/3202038/1060487

于 2013-01-22T14:04:28.307 に答える
0

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/

于 2013-01-22T14:33:53.097 に答える
0

jquery.cssには、最後にpxが付いた文字列が必要です。あなたの場合：

$('#category').css({"left" : position.left + 'px', "top" : position.top + 'px'});
于 2013-01-22T13:18:39.520 に答える