javascript - div 中心的层 div

Question

我需要像图像中那样实现，并且除了加载器部分之外我已经完成了所有工作。当我单击左侧的复选框时，我想div(loade+text "updating results)位于搜索结果 div 的中心。

笔记：

1. 即使滚动条在那里，仍然div(loade+text "updating results)在中心。

2. div(loade+text "updating results)没有出现在页面中心，而是出现在搜索结果的中心（排除左侧复选框）。

请帮助将此加载程序置于搜索结果的中心

** 我所附的图像是需要的，我还没有实现它。

Answer 1

你确定你知道你想要什么？

我希望 div(loade+text "updating results) 出现在搜索结果的中心

没有出现在页面中心，而是出现在搜索结果的中心

我假设您想要屏幕中央的“更新结果”div。

您需要将其位置设置为固定以使其远离文档流，然后将位置设置为顶部和左侧的 50%，最后将边距调整为元素大小的一半以考虑元素。

#updating_results_divs_id {
    position: fixed;
    height: 200px;
    width: 400px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

Answer 2

我想这可能对将来的某人有所帮助：

function setToCenterOfParent( obj, parentObj ) {
    var height = $( obj ).height();
    var width = $( obj ).width();
    if ( parentObj == window ) {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) );
    }
    else {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) + $( parentObj ).position().top );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) + $( parentObj ).position().left );
    }
}

Answer 3

我认为加载div应该是定位absolute的，如果你让它嵌套在搜索结果div中，尝试添加这种样式：

{
    left: 50%; 
    top:50%
}

Answer 4

你可以使用 jQuery BlockUI插件。这里有一些演示。您也可以浏览那里使用的 CSS。

另外，你可以看看死亡中心

Answer 5

    leftPos = $('.searchResultsDiv').offset().left +($('.searchResultsDiv').width() - $('.layerDiv').width())/2;
    topPos = $('.searchResultsDiv').offset().top + ($(window).height()-$('.layerDiv').height())/5;
    $('.layerDiv')
        .css('position','fixed')
        .css('left',leftPos)
        .css('top',topPos);