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消息不会居中（或甚至在屏幕上可见）垂直。

问题：无论如何，我可以检测到对话框中有哪些可见区域，这些区域有一个垂直滚动条可以正确地垂直对齐块消息？

上面你可以看到它的硬编码从顶部是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")
        });

Answer 1

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

对于大小为1000px的窗口，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

使用

$('#modalDialogContainer').scrollTop()

查找用户的滚动量。

然后，您可以使用

显示消息

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

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

Answer 4

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

这是一个快速演示：

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

这是源页面：

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

用法简单如下：

$('#element').visible()

Answer 5

为什么要干扰内容的高度？

我的意思是，通过放置一个＆＃34; BlockUI＆＃34;而不是一个更容易解决问题的方法。在JQuery对话框上。由于你有一个固定的高度，你的块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();
});

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

5 个答案: