如何在 fancybox.showloading 显示时部分覆盖页面？

Question

我有以下代码：

html:

<ul>
    <li>
       1111111111111
    </li>
    <li>
       22222222222222
    </li>
    <li>
       33333333333333
    </li>
    <li>
       44444444444444
    </li>
    <li>
       555555555555555
    </li>
    <li>
       66666666666666
    </li>
</ul>
<br>
<br>    
<div type="button" class="on">on </div>
<div type="button" class="off">off </div>

js:

$(".on").click(function(){
    $.fancybox.showLoading();  
});
$(".off").click(function(){
    $.fancybox.hideLoading();  
});

DEMO

您可以点击 on 或 off 它会导致 showing/hiding 动画。

我希望在动画显示时覆盖具体的 html 标签（ul 在我的示例中）。

以下地区：

请帮忙改正我的例子

Answer 1

是这样的吗？

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();

http://jsfiddle.net/daveSalomon/PudLq/582/

一个ul有display:block;。如果您只希望块覆盖文本的宽度，则需要计算 ul 所需的宽度。这是相同的代码，其中 ul 的任意宽度为 150px.

http://jsfiddle.net/daveSalomon/PudLq/583/

编辑

还要将 'loading' 图标放置在元素的中心....

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

http://jsfiddle.net/daveSalomon/PudLq/585/

Answer 2

如果我对您的理解正确，它应该需要一些 CSS 更改，并在您的点击事件中进行一些数学计算。 DEMO

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

<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>

那么由于默认情况下 <ul> 是一个块对象，我们应该将其设为 inline-block 以便于获取其宽度：

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

最后，在点击事件中，我们将获取目标的宽度，减去弹出加载器的宽度，并将剩余的宽度除以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();  
});

希望对您有所帮助！如果您有任何问题，请告诉我。

如何在 fancybox.showloading 显示时部分覆盖页面？

How to overlay page partially when fancybox.showloading shows?

html

javascript

css

jquery

fancybox-2