BlockUI for a certain <div> only

Question

I'm trying to block a div (with id="blockme") in my page that contains a gridview while the gridview is loading. I found the code below at Github but this code blocks the whole page.

<script type="text/javascript">
        Page = Sys.WebForms.PageRequestManager.getInstance();
        Page.add_beginRequest(OnBeginRequest);
        Page.add_endRequest(endRequest);

        function OnBeginRequest(sender, args) {
            $.blockUI();
        }
        function endRequest(sender, args) {
            $.unblockUI();
        }

 </script>

I looked into stackoverflow and I found this answer which shows how to block a certain div on button click.

My problem is that I don't want to use the button click event but use page begin request and end request instead events to block my div.

I tried doing this but it doesn't work:

    function OnBeginRequest(sender, args) {
        $('#blockme').blockUI();
    }
    function endRequest(sender, args) {
        $('#blockme').unblockUI();
    }

Answer 1

These two links helped me solve it here and this SO question

Here's how it worked:

<script type="text/javascript">
        Page = Sys.WebForms.PageRequestManager.getInstance();
        Page.add_beginRequest(OnBeginRequest);
        Page.add_endRequest(endRequest);

        function OnBeginRequest(sender, args) {
            $('div#blockme').block({
                message: '' ,
                overlayCSS: { backgroundColor: '#fff'   }
             });
        }
        function endRequest(sender, args) {
            $('div#blockme').unblock();
        }

 </script>