Nice work mate

I have a problem with the overlay image and text, the overlay shown fine at start, but when i scroll the page, the image and text (processing…) move. below are screen shots for more explaining.

start: when scrolling:

var objOverlaySettings = {
      overlayText: "Processing...",
      overlayImage: "assets/images/loader2.gif",
      overlayCss: {
            backgroundColor: "#fff",
            opacity: 0.4
       }
};
$("#afterResults").on("click.load-content-start", function() {
      $('.ajaxtest').ObjectOverlay(objOverlaySettings);
});

$("#afterResults").on("click.load-content-finish", function() {
      $(".ajaxtest").ObjectOverlay("hide", function() {
          this.destroy();
      });
 });

<div id="afterResults">
        <div class="load-content-start">Load content</div>
        <div class="ajaxtest" style="height: 250px; width: 550px;">
ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here
 ajax here ajax here ajax here ajax here ajax here ajax here ajax here
         ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here
         ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here ajax here
         ajax here ajax here ajax here ajax here ajax here ajax here ajax here</div>
        <div class="load-content-finish">Finish</div>
</div>

I really like your script man.

Will come handy for an custom personal popup… However I thought to use it for something like real time blur for scrolling content behind header.

I don’t know if there’s possibility, so far I did not found it as possible.

Nonetheless, great script.

I like what you did there