jQuery UI对话框：如果滚动条可见，则位置错误

Question

我有一个带滚动条的大容器。

带有jquery UI的模态对话框应在此容器的中间打开。

对话框打开，但在关闭并再次打开后，向上或向下移动（因此它总是位置错误）。

我从这个帖子Can JQuery UI Dialog remember its position between opening and closing添加了以下部分：

beforeclose: function(){
   $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
}

如果我删除此部分，则在页面顶部上拖动/移动 后，对话框会打开。

此外，如果在底部打开对话框，则移动更加疯狂。

我的代码：

$("#btnTest").click(function(){
  if ($("#exec").length == 0) {

            $('body').append('<div id="exec" style="width:320px;background-color: #000;display:none;">xxx</div>');

          $("#exec").dialog({
            width: 320,
            modal: true,
            position: "center",
            show: { effect: "slide", direction: "up", duration: 400 },
            hide: { effect: "slide", direction: "up", duration: 400 }
         });
       } else {
            $("#exec").dialog("open");
        }
 });

$("#btnClose").click(function(){
    $("#exec").dialog('close');
});

检查@ jsfiddle：  http://jsfiddle.net/EDkk6/4/

Answer 1

重新打开时，模态的顶部位置似乎有20px的差异。我相信这是因为UI对话框是在父div中创建的，您在偏移中没有考虑到这一点。因此，您需要根据父级获取偏移量，如下所示：

beforeclose: function () {
    var $parent = $(this).parent();

    $(this).dialog('option', 'position', [$parent.offset().left,$parent.offset().top]);
}

Live DEMO

Answer 2

替换以下行：

beforeclose: function(){
   $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
}

使用：

beforeclose: function(){
   $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top-20]);
                                                                                     ^^ Added -20 with offset().top
}

SEE DEMO