Drupal 6: Improving AJAX usability by fading the screen and preventing the user from clicking on anything with jQuery
In this article I’ll share some code that I use to gray out the screen during AJAX calls to prevent users from clicking on anything, and displays a visual cue to the user that their click request is still being processed.
In the following code, I created a hook_menu() implementation and 2 page callbacks; one to show a clickable link and the other to process the AJAX request.
After flushing my menu cache, and browsing to the first page callback, I see the following:
I added some CSS to my module’s CSS include file (helper.css), to help position the “shadow” full screen:
I created a 50% black transparent PNG image in PhotoShop:
Now when I click on the link the page fades to black and the user cannot click on anything. After the 3 second delay (defined in the AJAX callback), the black shadow fades away.