Question

我怎样才能将这种叠加效果添加到特定元素而不是整个身体？

HTML：

<div id="elementToOverlay">          
   <p><strong>Blablabla</p>
</div>

<div class="modal"></div>

JS：

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

CSS：

 /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

（在这种情况下是#elementToOverlay，在顶部）。无论我在哪里改变某些东西，它都无法解决。没有任何东西被覆盖或一切......

非常感谢和亲切的问候， SirSandmann

Answer 1

如果叠加设置为Dim permittedCurve(4) As Variant Dim indicationCurve(4) As Variant indicationCurve(0) = 1 indicationCurve(1) = 10 indicationCurve(2) = 100 indicationCurve(3) = 1000 indicationCurve(4) = 10000 'Copying the curves permittedCurve = indicationCurve，则位置将始终相对于视口。

我们假设您要在第一段设置叠加层，首先将容器设置为position:fixed。

position:relative

然后将叠加层对象移动到该容器中。

#elementToOverlay {
  position: relative;
}

并将其设为<div id="elementToOverlay"> <p>...</p> <div class="modal"></div> </div>。

position:absolute

然后它将显示在该容器内。

<强> Updated jsFiddle

Answer 2

在#elementToOverlay内部移动模态可能是不切实际的，因此此解决方案会向上调整大小并动态定位模态以完全覆盖#elementToOverlay

小提琴： http://jsfiddle.net/uL9habv1/2/

ele = $('#elementToOverlay');
$(document).on({
    ajaxStart: function() { $body.addClass("loading");
        $('.modal').css('left',ele.offset().left)
                   .css('width',ele.outerWidth())
                   .css('top',ele.offset().top)
                   .css('height',ele.outerHeight());
    },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

Answer 3

您可能希望通过编辑CSS代码来解决此问题。该元素目前定位在其他所有位置，高度和宽度均为100％。无论目前的元素是什么，这肯定会覆盖任何东西。

在Ajax请求期间覆盖特定元素

3 个答案: