クリックの近くにポップアップを表示する簡単な方法の良い例を見つけました: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));
});
明らかに要素(エディターによって表される)を検出しますが、幅または高さを判別できません。表示がnoneに設定されていることは知っていますが、それは誰かがボタンをクリックしてポップアップを表示するまで表示したくないためです。なぜそれが常にヌルであるのか、誰かが何か考えを持っていますか?
これが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>