-2

ページにモーダル ダイアログ ウィンドウを追加しています

$('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 開発者ツールは高さを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>

ここに画像の説明を入力

ここに画像の説明を入力

4

1 に答える 1