Как добавить текст в Fancy Box Loader

При нажатии на ссылку мне нужно загрузить огромный pdf файл на обложке FancyBox. Пока 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>

P.S.

Вы можете изменить следующую скрипту.

DEMO

Ответ 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() снова напрямую; анимация загрузки по умолчанию будет показана пользователю. Я протестировал его и добавил еще одну ссылку в скрипте, чтобы показать анимацию загрузки по умолчанию. Нажмите "Показать загрузку по умолчанию", чтобы увидеть этот эффект.

Надеюсь, это поможет вам.

Ответ 2

После ответов на 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 до одной строки.

Наконец, я удалил последнюю часть функции, которая удаляла класс. Поскольку это больше не требуется, вы можете просто сохранить вызов "hideLoading" FancyBox.

В целях обучения я удалил из последней функции следующее:

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

Опять же, вот JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/

Первое обновление:

Я увидел, что первый пользователь должен ответить, обновить свой ответ и во время работы, я бы предложил как можно больше отбросить "важные" теги. Я тоже уточнил свой ответ и разработал решение, которое не использовало никаких важных тэгов.

Изначально: $('# fancybox-load div'). append ( "Please Wait..." ); теперь был изменен на:
```
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
```

Я заметил более ранний комментарий от вас, в котором указано, что вы хотите настроить таргетинг на определенные накладки загрузки - что делает эта функция: выбирает каждый элемент "#overlay", которому предшествует элемент "#target" - вы можете вставить любую цель, которую вы хотите.

Я удалил все экземпляры тега "! important" - это просто лучшая/стандартная практика.
```
.overrideLoading{
    color: white;
    position: absolute;
    top: 86px;
    left: 16px;
}
```

Обновлен JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/

Ответ 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;}

Ответ 4

Вот разветвленная версия Fiddle.

Я в основном span с текстом "Please Wait". Затем я применил 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;
}