How to prevent user from interacting with the page when making an ajax request
<p>Im using ajax to allow a user to delete something on my page.</p>

<p>What html/css tricks can i use to prevent the user from clicking on anything on the page. What im after is some sort of transparent overlay with a spinner in the center of my screen.</p>

<p>In ajax i know i can use beforesend and success functions to show and hide the loading.</p>

<pre><code>    $.ajax({
            beforeSend : function (){
             $('#loading').show();
            }
            success: function (result) {
            $('#loading').hide();


            }

        });
    }
</code></pre>

<p>Ive come across these spinners but they are not full overlays which prevents the user from clicking on anything and they are not centered.
<a href="http://projects.lukehaas.me/css-loaders/" rel="nofollow">http://projects.lukehaas.me/css-loaders/</a></p>