Javascript 如何确定jquery对话框中当前可见垂直位置的位置？

我有一个例子，我正在使用一个，并且在对话框中有任何html表格，其中对话框的高度是固定的：

$("#modalDialogContainer").dialog({
    resizable: false,
    height: 700,
    autoOpen: false,
    width: 1050,
    modal: true,

我通过点击按钮调用一个AJAX查询，我想用它来显示一条“正在加载”的消息。大概是这样的：

   $("#myTableInsideDialog").block({
                css: {
                    top: '200px',
                    bottom: "",
                    left: ''
                },
                centerY: false, baseZ: 2000, message: $("#SavingMessage")
            });

我遇到的问题是，对话框中的内容比对话框的高度长 我假设对话框的高度是固定的，这样对话框就会有一个垂直的滚动条

有滚动条是好的（这实际上是我想要的），但连锁反应是这样的 由于取决于用户是否向下滚动，blockUI消息不会垂直居中（甚至在屏幕上不可见）

问题：我是否可以检测到对话框中的可见区域，该对话框具有垂直滚动条以正确垂直对齐阻止消息

如上所述，您可以看到它的硬编码为从顶部开始的200px，因此，如果用户没有向下滚动，则效果非常好，但如果用户一直向下滚动，则无法看到消息

简言之，如果我在卷轴的顶部，那么我会有以下内容：

$("#myTableInsideDialog").block({
            css: {
                top: '200px',
                bottom: "",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

如果我在卷轴的底部，那么我希望：

 $("#myTableInsideDialog").block({
            css: {
                top: '',
                bottom: "200px",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

---

我不会在顶部和底部属性之间切换：

对于大小为1000px的窗口，

顶部：800

=

底部：200

重要的问题是，你如何能找到你的滚动距离从顶部。为此，让我们使用一个函数：

function calcTopLocal() {
        var s = $('#modalDialogContainer').scrollTop() + 'px';
        return s;
}

现在，要将其应用于块，请执行以下操作：

 $("#myTableInsideDialog").block({
            css: {
                top: calcTopLocal()
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

这可以通过多种方式进行重构。重要的细节是使用

scrollTop（）

并应用样式。

---

对MKaama的回应：

我提出的答案没有循环，没有计时器，也没有重复行动的建议。没有

---

重复调用js函数只是为了保持位置不变，这是一种过度的操作，是对CPU的浪费

使用

查找用户滚动的数量

然后，您可以使用

 { top: $('#modalDialogContainer').scrollTop()+'px' }

---

对于他们来说，它总是可见的，并且出现在他们所看到的内容的顶部：）

有一个有用的插件，它可以判断元素在屏幕上是否可见（滚动到），您可以简单地使用它，对于屏幕上的可见区域，函数返回true：

下面是一个快速演示：

以下是源页面：

用法如下：

$('#element').visible()

---

为什么要为内容的高度而烦恼呢

我的意思是，在JQuery对话框上放置一个“BlockUI”不是一个更容易的解决问题的方法吗。因为您在那里有一个固定的高度，所以您的块UI也肯定是固定的。滚动条现在无法影响您的信息

一个粗略的例子是托管在fiddle中的。它给你两种体验，这样你就可以看到它的行为

例如，可以将块UI放在以下类上

var container = ".ui-dialog";
$(container).block({
   message: '<h1>Processing</h1>' 
});
$.ajax({
    url: "/echo/json/",
    data: {
        json: {},
        delay: 5
    }
}).done(function() {
   console.log("Done with ajax");
    $(container).unblock();
});

var container=“.ui对话框”；
$（容器）.block({
消息：“正在处理”
});
$.ajax({
url:“/echo/json/”，
数据：{
json:{}，
延误：5
}
}).done（函数（）{
log（“使用ajax完成”）；
$（容器）.unblock（）；
});

如果要在

ajax

请求数据时添加加载消息，可以在包含要显示的消息的对话框上附加

。然后，您可以将

相对位置

应用于

对话框

，将

绝对位置

应用于

，并使用

边距：自动

将div始终保持在对话框的中心，即使您滚动对话框

---

消息是否需要包含在模式中？您可以在JSFIDLE中复制来演示吗？问题标题和内容要求两种不同的东西。位置确定是一回事，信息定位是另一回事，最好在不确定任何东西的情况下实现，就像Gr8_Nik的回答一样。@MKaama，最好在十字军东征之前理解OP的意图和需求。您非常喜欢的解决方案涉及DOM操作，如果可能的话，请尽量避免在最上面使用DOM。你支持这个原因，而不是简单的滚动位置计算。有没有办法让它成为一个“粘性”函数。从某种意义上说，如果用户在ajax请求进行时滚动，块似乎会随着滚动而移动，不是吗？@Serendipity，“粘性”的重要性是什么？OP规定的优先顺序是按下按钮时块可见。我不认为浏览器允许当一个块被附加到modal时滚动，但即使它们允许滚动，也会有很大的损失吗？消息会被看到，用户会得到通知。重复调用js函数只是为了保持位置不变，这是一种过激行为，是对CPU的浪费。这是一份声明性职位的工作。@MKaama，我不理解你的评论。我建议每次调用

.block（）

时调用

calcTopLocal（）

一次，以计算位置。我甚至反对“粘性”。请解释这是如何定义为“cpu浪费”…我同意这是一个可接受的解决方案，因为“加载…”消息最初将显示为可见。如果用户在此之后滚动，它可能会变得不可见，尽管仍然相关。我对您的代码的假设是错误的，我认为它将保持可见。

var container = ".ui-dialog";
$(container).block({
   message: '<h1>Processing</h1>' 
});
$.ajax({
    url: "/echo/json/",
    data: {
        json: {},
        delay: 5
    }
}).done(function() {
   console.log("Done with ajax");
    $(container).unblock();
});

$("#modalDialogContainer").dialog({
    resizable: true,
    height: 300,
    autoOpen: true,
    width: 300,
    modal: true,
    buttons: {
        'call ajax': function(){
            // insert the loading div to the dialog
            $(this).parent().append("<div class='loading' />");

            $.ajax({
                type: 'json',
                url:  'jsonRequest.php',
                complete: function(){
                    // remove the loading div
                    $('.loading').remove();    
                },
                success: function(){
                    //do what you want
                }
            });
        }
    }
});

#modalDialogContainer{
    position: relative;
}

#myTableInsideDialog{
    height: 1000px;
    width:  100%;
}

.loading{
    position: absolute;
    top:      0px;
    bottom:   0px;
    left:     0px;
    right:    0px;
    margin:   auto;
    ...
}