javascript - jquery-ui : Dialog not opened at vertical center

Question

我有一个定义如下的 jquery ui 对话框:

$('#processPosition').dialog({
        autoOpen : false,
        open: function ()
        {           
            dialogProps.originalContent = $("#processPosition").html(),
            dialogProps.type = $(this).data('type');

            $('#' + dialogProps.type).appendTo($(this));
            $('#rejectPosition').appendTo($(this));
            $("#processPosition .template").removeClass("template");
        },
        show : "blind",
        modal : true,
        resizable : false,
        scrollbar : false
    });

这是我打开它的方式:

$('#processOrderPosition').dialog({width: 800})
                          .dialog('option', 'position', 'center')
                          .dialog("open");

这是模板类的唯一CSS:

.template
{
    display: none;
}

HTML 模板div:

<div id="SAP-flst-Dialog" class="template">
    <h4>Header</h4>
    <div class="row">
        <span>Some text</span>
    </div>
</div>

<div id="rejectOrderPosition" class="template">
    <h4>second Header</h4>
    <span>Some more Text</span>
</div>

打开后我也试过设置position属性，但是没有效果。在我浏览器的开发工具中，我可以看到 div 是由 jquery 生成的，并且此 div 的 css top 属性值错误。 div 具有以下类:ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable

是什么导致了错误的最高值？

Answer 1

https://jsfiddle.net/c85fo36u/6

$(document).ready(function(){
  $('#processPosition').dialog({
  autoOpen : false,
  open: function ()
  {           
      dialogProps.originalContent = $("#processPosition").html(),
      dialogProps.type = $(this).data('type');
      $('#' + dialogProps.type).appendTo($(this));
      $('#rejectPosition').appendTo($(this));
      $("#processPosition .template").removeClass("template");
  },
  show : "blind",
  modal : true,
  resizable : false,
  scrollbar : false
});

$('#processPosition').dialog().dialog("打开");

})

看看这个 fiddle ，我在 div 中添加了边框以查看它是否居中。