jQuery彈出窗口不顯示在所需的位置

我有一個文本框和一個隱藏的div，它將顯示爲一個彈出窗口。我想當用戶點擊文本框時，隱藏的div彈出窗口將顯示在文本框的位置。所以，我使用的代碼：jQuery彈出窗口不顯示在所需的位置

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

我做錯了什麼？

編輯：完整hidded股利如下：

<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>

來源

2013-01-22 ipkiss

你可以發佈文本和div的HTML嗎？ –

我已經更新了完整的隱藏div的問題，其他人只是HTML開放/關閉標籤 – ipkiss

您可能要檢查是否類別容器絕對定位具有相對定位的另一個DIV中。

這將意味着頂部，左邊是相對於父項。

因此，通過獲取父級的頁面偏移量，然後將其設置給子級，您可以將它從父級而不是下級中移除。

檢查了這一點還有：https://stackoverflow.com/a/3202038/1060487

來源

2013-01-22 14:04:28 mattdlockyer

jquery.css在年底需要一個字符串像素。你的情況：

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

來源

2013-01-22 13:18:39 daniatic

如果未指定單位將使用「px」。 – dfsq

添加'px'仍然不起作用 – ipkiss

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-22 14:33:53 darshanags

jQuery彈出窗口不顯示在所需的位置

回答

相關問題