how can I grey out and show loading in the web page when user clicks on those items that are linked to next page?

Question

I created a php-html website with many pages, in these pages there are ,,, and other html elements, but not all of them linked to other pages, it means they do a job into the current page, but other elements are linked to other pages, how can I set when user clicks on those elements(,,...) that are linked to other pages,before going to next page the page be grey and loading.gif is shown. I see this code http://hungred.com/how-to/tutorial-simple-screen-grey-effect-jquery/

but in this jQuery code we need to set $('#button').click(pop); for thoese elements one by one,that I think it is not good job, what is the good idea, that works for whole pages?

Answer 1

A quick solution could be to apply the same class to all the buttons that need to act in this way:

<button class="externalLink">Button 1</button>
<button class="externalLink">Button 2</button>
<button class="externalLink">Button 3</button>
<button class="externalLink">Button 4</button>
<button class="externalLink">Button 5</button>

And then write something like this in javascript:

$('.externalLink').click(pop);

This will apply the same behavior to all the buttons with that class