Display Loader and disable page while waiting for ajax request

 I have a project in which I use MVC C#, with Bootstrap and FontAwesome.

My objective is to show a spinner and disable the page while waiting for an ajax request.

So far, I have successfully acomplished this goal with the following code:

HTML:

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="~/Images/ajax-loader.gif">
</div>

JS:

function blablabla() {
            //show spinner, disable page
            var modal = $('<div>').dialog({ modal: true });
            modal.dialog('widget').hide();
            $('#ajax_loader').show();

            $.ajax({
                type: "Get",
                url: url,
                success: function (result) {
                   alert("success! " + result);
                },
                error: function(result) {
                    alert("error!" + result);
                },
                complete: function () {
                    //back to normal!
                    $('#ajax_loader').hide();
                    modal.dialog('close');
                }
            });
        }

Now, this code works, I have the page disabled and I show a spinner. However, this spinner is also grayed out, and I do not want that to happen.

Vikas