如何将文本添加到 Fancy Box Loader

Question

单击链接时，我需要在 FancyBox 叠加层上加载一个巨大的 pdf。在加载 pdf 之前，我正在显示一个 FancyBox 加载器。问题是我需要在 FancyBox 加载器中添加类似“请稍候...等”的文本。有人可以帮忙吗？

这是我的代码：

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

附言

您可以修改以下小提琴。

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

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

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

只需使用 content: 规则将您的文本添加到 :after 伪元素，并修改加载包装器的样式以适应。

这是我添加的 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 3

这是您的Fiddle 的分叉版本。

我基本上是span，上面写着“请稍候”。然后我应用了一些 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;
}

Answer 4

按照 vijayP 的回答：

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

我修改了他的 CSS 类“overrideLoading”：

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

如您所见，我添加了“位置：绝对”和“顶部”位置 - 您可以将其修改为您需要的任何显示方式。

接下来我修改了他的 jQuery，我对其进行了修改以实际添加一个新元素：

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

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

最后，我删除了函数的最后一部分，即删除类。由于不再需要此操作，您可以只保留 FancyBox 的“hideLoading”调用。

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

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

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

---

第一次更新：

我看到第一个回答的用户更新了他的回答并且在工作时，我建议尽可能避开“！important”标签。我也完善了我的答案并开发了一个不使用任何 !important 标签的解决方案。

1. 原来的：$('#fancybox-loading div').append("Please Wait...");现在改为：

   $('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
   

我注意到您之前的评论，其中指定您想要定位特定的加载覆盖 - 这个函数的作用是：选择前面有一个 '#target' 元素的每个 '#overlay' 元素 - 你可以插入任何你想要的目标。

1. 我删除了“！important”标签的所有实例 - 这只是最佳/标准做法。

   .overrideLoading{
       color: white;
       position: absolute;
       top: 86px;
       left: 16px;
   }
   

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