Question

点击链接时我需要在FancyBox叠加上加载一个巨大的pdf。在加载pdf之前，我正在显示一个FancyBox加载器。问题是我需要在FancyBox加载器中添加“Please Wait ... etc”等文本。任何人都可以帮忙吗？

这是我的代码：

    <p>
        <a class="fancypdf" href="hugepdf.pdf">Click
            Here To View The PDF</a>
    </p>

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancypdf").click(function(event) {
            $.fancybox.open(this.href, {
                type : "iframe"
            });
            $.fancybox.showLoading();
            $("iframe.fancybox-iframe").load(function() {
                $.fancybox.hideLoading();
                content: {
                    text: 'Loading...',}
            });
            event.preventDefault();
        });
    });
</script>

P.S。

您可以修改以下小提琴。

DEMO

Answer 1

请看下面的修改：

更新了小提琴链接：http://jsfiddle.net/PudLq/619/

1）将CSS类添加为：

#fancybox-loading{
    background-repeat: no-repeat;
    background-position: center -108px;
    text-align: center;
}
#fancybox-loading div{
    margin: auto;
}
.overrideLoading{
    background: none !important;
    color: white;
    width: 92px !important;
}

2）显示加载动画后;根据我们的需要改变加载div HTML，如下所示：

$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");

3）隐藏动画;正如“rockmandew”所暗示的那样，完全没有必要恢复我们的HTML / CSS更改。直接再次致电$.fancybox.showLoading();默认加载动画将显示给用户。我测试了它并在小提琴中添加了一个链接以显示默认加载动画。请单击“显示默认加载”以查看该效果。

我希望这会对你有所帮助。

Answer 2

按照vijayP的回答：

JsFiddle：http://jsfiddle.net/rockmandew/kmfeppec/

我修改了他的CSS类＆＃34; overrideLoading＆＃34;：

.overrideLoading{
    background: none !important;
    color: white;
    position: absolute;
    top: 42px;
}

正如你所看到的，我添加了一个＆＃34;位置：绝对＆＃34;和＆＃34;顶部＆＃34; position - 你可以修改它，但是你需要它出现。

接下来我改变了他的jQuery，我修改了它实际上附加了一个新元素：

$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");

如您所见，这将您所需的jQuery减少到一行。

最后，我删除了函数的最后一部分，即删除该类。由于不再需要，您可以保留FancyBox＆＃34; hideLoading＆＃34;调用

出于学习目的，我从最后一个函数中删除了以下内容：

$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");

同样，这里是JsFiddle：http://jsfiddle.net/rockmandew/kmfeppec/

第一次更新：

我看到第一个回答的用户，更新了他的答案并且在工作的时候，我建议回避＆＃34;！important＆＃34;标签尽可能多。我也完善了我的答案并开发了一个没有使用任何重要标签的解决方案。

最初的内容： $（＆＃39;＃fancybox-loading div＆＃39;）。追加（＆＃34;请等待......＆＃34;）; 现在改为：
```
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
```

我注意到您之前的评论，其中指出您希望定位特定的加载叠加层 - 此功能的作用是：选择每个＆＃39;＃overlay＆＃39;以＆＃39; #target＆＃39;开头的元素element - 你可以插入你想要的任何目标。

我删除了＆＃34;！important＆＃34;的所有实例。标签 - 这只是最佳/标准做法。
```
.overrideLoading{
    color: white;
    position: absolute;
    top: 86px;
    left: 16px;
}
```

更新了JsFiddle：https://jsfiddle.net/rockmandew/kmfeppec/7/

Answer 3

我没有机会调整产生的定位有点偏离中心，但这可能是一个更简单的解决方案：

http://jsfiddle.net/PudLq/621/

只需将文本添加到带有:after规则的content:伪元素，然后修改加载包装器的样式以适应。

这里是我添加的CSS：

#fancybox-loading {
    background: #000;
    padding: 5px;
    border-radius: 6px;}

#fancybox-loading:after {
    content:"Please wait...";
    display:inline-block;
    color:#fff;}

#fancybox-loading div {margin:auto;}

Answer 4

以下是Fiddle的分叉版本。

我基本上span带有文字＆＃34;请等待＆＃34;。然后，我已经应用了一些CSS来定位它，就像你使用#fancybox-loading一样。

这是新的javascript代码 -

$(".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
    });
    var labelWidth = 80;
    $('body').append($('<span>', {
        'class': 'waitText'
    }).text("Please Wait").css({
        'width': labelWidth,
        'left': (target.width() - labelWidth) / 2,
        'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
    }));
});
$(".off").click(function () {
    $('#overlay').fadeOut(200);
    $.fancybox.hideLoading();
    $('.waitText').remove();
});

我的新CSS -

.waitText {
  position: fixed;
  margin: auto;
  color: white;
  text-align: center;
}

如何将文本添加到Fancy Box Loader

P.S。

4 个答案: