Question

我是使用jquery的新手。我正在尝试在simplemodal.js（Eirc Martin的简单模态）中添加一个名为＆＃39; jBox＆＃39;将获取数据（即链接）和选项并使用ajax将内容加载到模态容器中。这样我想在几个地方的页面上轻松调用这个函数

    jBox = function(address, options){
        $.get(address, function(data) {     
            $.modal(data);
        }); 
    };
});

代码工作正常，但我想在内容完全加载之前添加加载图像。在simplebox中有很多关于loader / spinner的类似帖子，但对我来说都没有。我正在尝试使用代码

$('#test').load('<img src="loader.gif">').html(data);
$('#test').modal();

但是，从某种程度上说，它对我不起作用。我有什么想法我做错了吗？感谢

Answer 1

我使用ajaxStart和ajaxStop事件。

$("body").on({
    ajaxStart: function() { 
        $(this).addClass("loading"); // so page knows it's in loading state
        // .. your modal code
    },
    ajaxStop: function() { 
        $(this).removeClass("loading"); // not it loading state anymore
        // .. What you should do if loading is done. (eg. hide modal)
    }    
});

在这种情况下，我将body类设置为'loading'。如果你愿意，你可以在CSS中做一些魔术。我倾向于使用它来禁用表单。

body.loading div.some-class {
    // your special style for during loading
}

简单的模态装载机

1 个答案: