Javascript 当fancybox.showloading显示时，如何部分覆盖页面？

我有以下代码：

html:

您可以单击

打开

或

关闭

以显示/隐藏动画

我希望在动画显示时覆盖具体的html标记（

ul

）

以下方面：

请帮助更正我的示例

类似的内容

var $el = $('ul');
var $cover = $('#dummy');
var coverPos = $el.position();

$cover.css({
    position:'absolute',
    top: coverPos.top,
    left:coverPos.left,
    width:$el.width()+'px',
    height:$el.height()+'px',
    background:'#f00'
}).show();

A

ul

具有

显示：块。如果只希望块覆盖文本的宽度，则需要计算
ul
所需的宽度。这是相同的代码，
ul
具有任意宽度
150px


编辑

还要将“加载”图标放置在元素的中心

$('#fancybox-loading').css({
    position:'absolute',
    top: coverPos.top + ($el.height()/2),
    left:coverPos.left + ($el.width()/2),
});

如果我理解正确，它应该需要一些CSS更改，并在单击事件中进行一些计算

首先，为目标元素提供某种标识符：

<ul id="target">
    <li>
       1111111111111
    </li>
    <li>
       22222222222222
    </li>
    <li>
       33333333333333
    </li>
    <li>
       44444444444444
    </li>
    <li>
       555555555555555
    </li>
    <li>
       66666666666666
    </li>
</ul>
<div id="overlay"></div>

最后，在单击事件中，我们将获得目标的宽度，减去弹出加载程序的宽度，然后将剩余的宽度除以2使其居中。高度相同：

$(".on").click(function(){
    var target = $('#target');
    var overlay = $('#overlay');
    overlay.width(target.width()).height(target.height()).css({
        'left': target.position().left,
        'top': target.position().top
    }).fadeIn(200);
    $.fancybox.showLoading();
    $('#fancybox-loading').css({
        'left': (target.width() - $('#fancybox-loading').width()) / 2,
        'top': (target.height() - $('#fancybox-loading').height()) / 2,
        'margin': 0
    });
});
$(".off").click(function(){
    $('#overlay').fadeOut(200);
    $.fancybox.hideLoading();  
});

我希望这有帮助！如果您有任何问题，请告诉我。
我还希望在中间的oberlayed播放动画area@gstack我没有使用FancyBox，所以我不确定这是否真的是正确的方法。但我已经更新了我的答案。答案很好，但不幸的是，我已经接受了一个正确的答案，不能再接受一个了。但我在你的演示区看到了，我一秒钟都没看到。我会把答案和小提琴修好的。像这样的事？你忘了我了）
<ul id="target">
    <li>
       1111111111111
    </li>
    <li>
       22222222222222
    </li>
    <li>
       33333333333333
    </li>
    <li>
       44444444444444
    </li>
    <li>
       555555555555555
    </li>
    <li>
       66666666666666
    </li>
</ul>
<div id="overlay"></div>

#target {
    display:inline-block;
    border: solid 1px;
}
#overlay {
    display:none;
    position: absolute;
    background: rgba(0,0,0,.5);
}

$(".on").click(function(){
    var target = $('#target');
    var overlay = $('#overlay');
    overlay.width(target.width()).height(target.height()).css({
        'left': target.position().left,
        'top': target.position().top
    }).fadeIn(200);
    $.fancybox.showLoading();
    $('#fancybox-loading').css({
        'left': (target.width() - $('#fancybox-loading').width()) / 2,
        'top': (target.height() - $('#fancybox-loading').height()) / 2,
        'margin': 0
    });
});
$(".off").click(function(){
    $('#overlay').fadeOut(200);
    $.fancybox.hideLoading();  
});