附加元素报告错误的高度

Question

我将一个模态对话框窗口附加到我的页面

$('body').append('<div id="modalBackdrop" style="z-index: 1000; display: none;"></div><div id="modalContent">' + $(content).html() + '</div>');

然后我做

var modalContent = $('#modalContent');
var mdcTop = modalContent.height();
console.log(mdcTop);
$('#modalBackdrop').css(css).css('top', 0).css('height', docHeight + 'px').css('width', docWidth + 'px').show();
modalContent.css({'margin-top': -mdcTop + 'px'}).hide()[animation](speed);

这里是完整的脚本：http://jsfiddle.net/2jdrp/

奇怪的是，Web Developer工具报告高度为： 393.25px 但是console.log报告 91 ......

这是模态对话框的实际加载HTML内容：

<div id="modalContent" style="margin-top: -91px; display: block;">    <div class="ctools-modal-content" style="width: 570px;">      <div class="modal-header">        <a class="close" href="#"><img src="http://10.0.146.120/profiles/paddle/themes/paddle_admin/images/icon-close-window.png" alt="Close window" title="Close window">        </a>        <span id="modal-title" class="modal-title">Create new menu</span>      </div>      <div id="modal-content" class="modal-content" style="width: 545px;"><form action="/admin/structure/menu_manager/ajax/add" method="post" id="paddle-menu-manager-menu-form" accept-charset="UTF-8" class="ctools-use-modal-processed"><div><div class="form-item form-type-textfield form-item-title">
  <label for="edit-title">Title <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" id="edit-title" name="title" value="" size="40" maxlength="128" class="form-text required">
<div class="description">Enter the title of your menu.</div>
</div>
<div class="form-item form-type-textarea form-item-description">
  <label for="edit-description">Description </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-description" name="description" cols="50" rows="4" class="form-textarea"></textarea><div class="grippie"></div></div>
<div class="description">Enter a short description of your menu.</div>
</div>
<input type="submit" id="edit-submit" name="op" value="Save" class="form-submit"><input type="hidden" name="form_build_id" value="form-hA5i4CZsTuBPITxX89QZr2NvtrCxexBixbjTGsr1taE">
<input type="hidden" name="form_token" value="13r4DJkBshuYXq9t9cG5U5IPwUaIdU0W4xYPx9naHXQ">
<input type="hidden" name="form_id" value="paddle_menu_manager_menu_form">
</div></form></div>    </div>  </div>

Answer 1

如果你使用outerHeight而不是高度呢？

var mdcTop = modalContent.outerHeight(true);