0

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

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

对话框打开，但在一次又一次关闭和打开之后，它会向上或向下移动（因此它的位置总是错误的）。

我已经从这个线程中添加了Can JQuery UI Dialog 记住它在打开和关闭以下部分之间的位置：

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/

4

2 回答 2

1

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

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

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

现场演示

于 2012-09-10T12:39:03.077 回答
0

替换以下行：

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
}

看演示

于 2012-09-10T12:54:42.373 回答