簡單的模態加載器

我是新的使用jQuery。我試圖在simplemodal.js（Eirc Martin的簡單模式）中添加一個名爲'jBox'的函數，它將獲取數據（即鏈接）和選項，並使用ajax將內容加載到模式容器中。這樣，我想在我的網頁在好幾個地方容易調用這個函數簡單的模態加載器

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

的代碼工作正常，但我想補充一個加載圖像之前的內容是滿載。在簡單的框中有很多關於裝載器/微調器的類似帖子，但對我來說沒有任何作品。我嘗試下面的代碼

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

但是，某種程度上，它不工作對我來說。任何想法我做錯了什麼？謝謝

來源

2013-03-14 user2166406

第一個代碼片段有多餘的接近括號 – Raptor 2013-03-14 14:47:24

謝謝Shivan。我在複製代碼時出錯。第一個代碼工作正常。只是不知道如何添加一個加載器。下面的代碼從某種原因粘貼到函數dosnt工作中。 – user2166406 2013-03-14 14:53:36

我使用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 
}

來源

2013-03-29 11:03:24 Brainfeeder

簡單的模態加載器

回答

相關問題