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

Question

我有一个使用jquery ui dialog 的情况，并且我在对话框中有任何 html 表格，其中对话框的高度是固定的：

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

我通过单击按钮调用 AJAX 查询，并且我想使用 jquery UI blockUI plugin 来显示“正在加载”消息。像这样的：

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

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

有滚动条很好（这实际上是我想要的）但连锁反应是 因为 根据用户是否向下滚动，blockUI 消息不会垂直居中（甚至在屏幕上不可见）。

问题：我是否可以检测到具有垂直滚动条以正确垂直对齐块消息的对话框内的可见区域？

您可以在上面看到它的硬编码为距顶部 200 像素，因此如果用户没有向下滚动，它会很好用，但如果用户一直向下滚动，您将看不到消息

简而言之，如果我在卷轴的顶部，那么我会有这个：

$("#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")
        });

Answer 1

我不会在顶部和底部属性之间交替：

对于大小为 1000 像素的窗口，top:800 == bottom: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

Answer 2

如果您想在ajax 请求数据时添加加载消息，您可以在包含您要显示的消息的对话框上附加<div>。然后你可以将relative position 应用到dialog 和absolute position 到<div> 和margin:auto div 始终保持在对话框的中心，即使你滚动对话框。

jsFiddle demo

$("#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
                }
            });
        }
    }
});

CSS 文件应该是这样的

#modalDialogContainer{
    position: relative;
}

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

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

Answer 3

为什么要关心内容的高度呢？

我的意思是，通过在 JQuery 对话框上放置“BlockUI”并不是更容易解决问题的方法。既然你在那里有一个固定的高度，你的块 UI 肯定也是固定的。滚动现在无法影响您的消息。

一个粗略的例子托管在小提琴中的here。它为您提供两种体验，因此您可以了解它的行为方式。

例如，您可以将块 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();
});

Answer 4

使用

$('#modalDialogContainer').scrollTop() 

查找用户的滚动量。

然后您可以使用

显示您的消息

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

而且它总是对他们可见，并出现在他们正在查看的内容的顶部:)

Answer 5

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

这是一个快速演示：

http://opensource.teamdf.com/visible/examples/demo-basic.html

这里是源页面：

http://www.teamdf.com/web/194/jquery-element-onscreen-visibility

用法简单如下：

$('#element').visible()