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

【问题标题】：jQuery UI dialog: wrong position if scrollbars are visiblejQuery UI 对话框：如果滚动条可见，则位置错误
【发布时间】：2012-09-10 21:05:04
【问题描述】：

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

一个带有 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/

【问题讨论】：

我认为问题在于您没有考虑与模态本身一起创建的父 div。如果您获得父 div 的偏移量，则一切似乎都正常工作。查看我的答案以获取更多信息和演示。

标签： jquery jquery-ui drag-and-drop jquery-dialog

【解决方案1】：

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

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

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

Live DEMO

【讨论】：

@Keith 这能解决您的问题吗？你还有问题吗？
它可以工作，但只能使用顶部按钮。底部的按钮不起作用。

【解决方案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

【讨论】：