Как скрыть страницу и показать загрузочный div при вызове ajax

Question

Я хочу скрыть всю страницу, когда пользователь нажимает кнопку, показать div в центре страницы с загрузочным gif и вызвать ajax-запрос к странице.Когда Ajax заканчивает скрывать тень, скрыть загрузку div.возможно?может кто-нибудь объяснить мне, как?я вижу здесь этот код: $

("#btnLoad").click(function(){

  // Put an animated GIF image insight of content
  $("#content").empty().html('<img src="loading.gif" />');

  // Make AJAX call
  $("#content").load("http://example.com");
});

я могу использовать это?где я могу взять тень?

Answer 1

1. Создать новый div (id: загрузчик) с помощью css: position: fixed;z-индекс: 90;верх: 0;слева: 0;фон: ргба (0,0,0,0,5);Поместите его в и из секции body
2. Создайте новый div с помощью css: margin: 30% auto;ширина: 200 пикселей;высота: 60 ​​пикселей;фон: #fff;Поместите это в div, созданный в первой точке.Вставьте в него текст «Загрузка ...» или что-то еще.
3. Создайте js-функции, которые будут показывать div из первой точки при начальной загрузке и скрывать его в конце загрузки.

Например

function loadingOn() {
    $('#loader').fadeIn(300);
}

function loadingOff() {
    $('#loader').fadeOut(300);
}

function loadingToggle() {
    $('#loader').fadeToggle(300);
}

Вы должны вызывать эти функции только тогда, когда они вам нужны:)

Answer 2

---

Посмотрите на colorbox для jQuery.Это будет делать все, что вы хотите, с простым легким дополнением библиотеки к jQuery, которое вы уже используете.

http://jacklmoore.com/colorbox/