如何将文本添加到Fancy Box Loader

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>

PS

您可以修改以下小提琴.

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()再次直接打电话; 默认加载动画将显示给用户.我测试了它并在小提琴中添加了一个链接以显示默认加载动画.请单击"显示默认加载"以查看该效果.

我希望这能帮到您.