Javascript 如何将文本添加到花式方框加载器

当点击一个链接时，我需要在FancyBox overlay上加载一个巨大的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>

$（文档）.ready（函数（）{
$（“.fancypdf”）。单击（函数（事件）{
$.fancybox.open（this.href{
类型：“iframe”
});
$.fancybox.showLoading（）；
$（“iframe.fancybox iframe”）.load（函数（）{
$.fancybox.hideLoading（）；
内容：{
文本：“正在加载…”，}
});
event.preventDefault（）；
});
});

附笔。 您可以修改以下小提琴

---

请查看以下修改：

更新的小提琴链接：

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

$.fancybox.showLoading（）；
$（“#fancybox加载”）.append（“请稍候…”）；

3） 动画的隐藏；正如“rockmandew”所建议的，绝对不需要恢复我们对HTML/CSS的更改。再次直接调用

$.fancybox.showLoading（）

；默认加载动画将显示给用户。我已经对它进行了测试，并在fiddle中添加了一个链接来显示默认加载动画。请单击“显示默认加载”以查看该效果

---

我希望这将对您有所帮助。

以下是vijayP的回答：

JsFiddle：

我修改了他的CSS类“重写”：

正如你所见，我添加了一个“位置：绝对”和一个“顶部”位置-你可以根据需要修改它

接下来，我修改了他的jQuery，并将其修改为实际附加一个新元素：

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

同样，这里是JSFIDLE：

---

第一次更新：

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

最初是：$（'fancybox加载div'）.append（“请稍候…”）；现改为：

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

---

更新的JSFIDLE:

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

只需将文本添加到带有

内容：

规则的

：伪元素之后，并修改加载包装的样式以适应

以下是我添加的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;}

这是您的应用程序的分叉版本

我基本上已经用了
span
和文本“请稍候”。然后我应用了一些CSS来定位它，就像你在加载fancybox时所做的那样

下面是新的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样式
#fancybox加载div{
并将您的自定义html内容附加到loding overlay。我认为这对您会有更多帮助，但我需要仅在单击项目中的特定链接时自定义Fancybox加载程序。其他地方，默认的加载程序只应进行修改。几乎，但也应显示微调器。文本应放在微调器下有办法制作标签吗花式动画方块，使文本变长动画框你想要“请稍候…”没有黑色背景的文本吗？@gstackoverflow-这有用吗。这解决了你的问题吗？事实上是的，但我已经不能投票了（我想知道有没有办法让文本比动画更宽？另外，如果你想让文本在覆盖框之外，你所需要做的就是调整“顶部”位置。如果背景保持白色，你还必须明显改变文本的颜色。（我注意到，我想你是在上面的评论中要求这样做的。）
.overrideLoading{
    color: white;
    position: absolute;
    top: 86px;
    left: 16px;
}

#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;}

$(".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();
});

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