jquery-ui：对话框未在垂直中心打开答案

【问题标题】：jquery-ui: Dialog not opened at vertical centerjquery-ui：对话框未在垂直中心打开
【发布时间】：2018-06-11 23:36:20
【问题描述】：

我有一个 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模板divs:

<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>

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

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

【问题讨论】：

也添加你的html

标签： javascript jquery html css jquery-ui-dialog

【解决方案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("open");

})

看看这个小提琴，我给 div 添加了边框以查看它是居中的。

【讨论】：