javascript - 如何向 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>

附言

您可以修改以下 fiddle 。

DEMO

Answer 1

请看下面的修改:

更新的 fiddle 链接: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()；默认加载动画将显示给用户。我已经对其进行了测试，并在 fiddle 中添加了一个链接以显示默认加载动画。请单击“显示默认加载”以查看效果。

希望对您有所帮助。