我找到了一个简单的如何在点击附近显示弹出窗口的好例子:http ://roshanbh.com.np/examples/popup-message/
我正在利用它来单击按钮,但我似乎无法获得元素的实际宽度或高度,我也不完全确定为什么:
function BindObject(o)
{
o.click(function(e)
{
var editor = $(this).find(".object_editor");
console.log(editor);
console.log(editor.height());
});
}
这是打印到控制台的内容:
(仅供参考,在准备好文档时调用 BindObject,我也在使用 jqote,不确定它的相关性如何)
$("#QuestContent").html($("#QuestTemplate").jqote(quest_data));
$("#QuestContent").find(".object").each(function() {
BindObject($(this));
});
它显然找到了元素(由编辑器表示),但我无法确定它的宽度或高度。我确实知道显示设置为无,但那是因为我不想显示它,直到有人单击按钮以显示弹出窗口。任何人都有任何想法为什么它总是为空?
这是CSS:
.object_editor{
position:absolute;
z-index:10;
width:172px;
height:102px;
text-align:center;
color:#FFFFFF;
font: 14px Verdana, Arial, Helvetica, sans-serif;
background-color:#000000;
display:none;
}
编辑:以及相关的 jqote 以防万一:
<!-- Object Template -->
<script type="text/x-jqote-template" id="ObjectTemplate">
<![CDATA[
<span class="object <%= (this.hidden ? "hiddenType" : "") %>">
<input class="objectType" type="hidden" name="<%= this.key[0] %>" value="<%= this.type %>">
<input class="objectEntry" type="hidden" name="<%= this.key[1] %>" value="<%= this.entry %>">
<a data-emptytext="<%= object_types[this.type] %>" data-name="<%= this.key[1] %>" target="_blank" href="<%= (this.entry? whUrl(this.type, this.entry) : "#") %>" class="objectName"><%= this.name %><%= (this.entry?" ("+this.entry+")":"") %></a> <i class="icon-edit editObject"></i>
<% if(this.remove) { %>
<a href=".object" class="deleteParent"><i class="icon-trash"></i></a>
<% } %>
</span>
<!-- Insert our Editor -->
<%=$("#ObjectEditorTemplate").jqote({type: this.type, entry:this.entry}) %>
]]>
</script>
<!-- Object Editor Template -->
<script type="text/x-jqote-template" id="ObjectEditorTemplate">
<![CDATA[
<div class="object_editor">My Editor: <%= this.entry %></div>
]]>
</script>