Why did jqGrid disable the rest of my page?

I have a jqGrid calling a controller action (returning JSON to jqGrid). When my grid gets populated, everything but the "table body" gets disabled, as if table body is shown via some modal window:

This is my js code to init the grid, and the html:

<head>
    <title>Insert</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" />    
    <script src="/Scripts/EditorHookup.js" type="text/javascript"></script>    
    <script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

   <script type="text/javascript">
      var gridimgpath = '/content/themes/base/images';
      var gridDataUrl = '/Home/JsonPosloviForDate';
      var jsonDate =  "\/Date(1309816800000)\/";      
      var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));      
      $(function () {
         jQuery("#list").jqGrid({
            url: gridDataUrl + '?currDate=' + date.toJSON(),
            datatype: "json",
            mtype: 'GET',
            colNames: ['Šifra posla', 'Vrsta posla', 'Partner', 'Opis', 'Broj sati'],
            colModel: [
               { name: 'SifPosao', index: 'SifPosao', width: 50, align: 'left' },
               { name: 'kratVrstaPosao', index: 'kratVrstaPosao', width: 100, align: 'left' },
               { name: 'nazPartner', index: 'nazPartner', width: 100, align: 'left' },
               { name: 'opis', index: 'opis', width: 100, align: 'left' },
               { name: 'brSati', index: 'brSati', width: 100, align: 'left' },
                     ],
            rowNum: 20,
            rowList: [10, 20, 30],
            imgpath: gridimgpath,
            height: 'auto',
            width: '700',
            pager: jQuery('#pager'),
            sortname: 'SifPosao',
            viewrecords: true,
            sortorder: "desc",
            caption: "Poslovi"
         });
      }); 
   </script>
  
</head>
<body>
...    
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
...   
</body>

Solution

There are loadui parameter of jqGrid which allow you to manage how the grid will be blocked. You can try to use loadui:'disable' to verify that it is the problem which you has.

Nevertheless the behavior which you describe seems me strange. jqGrid uses <div> as overlay and the div has additional class with the name 'loading'. You should verify your CSS whether you have name conflict and use the same class name for another purpose.

By the way I recommend you to review the jqGrid parameters and HTML markup which you use.

The parameter imgpath will be not used since version 3.5 of jqGrid (see here). Do you really use a retro version of jqGrid? If not you should remove imgpath.
You should remove property align: 'left' from colModel because the default value of align is already 'left' (see here)
You should remove class="scroll" cellpadding="0" cellspacing="0" from the <table id="list"> and class="scroll" style="text-align:center;" from the <div id="pager">. the settings was needed in "retro" versions of jqGrid, but not now (see here an HTML example).
It is better to use pager: '#pager' instead of pager: jQuery('#pager').
Instead of constructing url: gridDataUrl + '?currDate=' + date.toJSON() it is better to use two parameters: url: gridDataUrl and postData: {currDate: date.toJSON()} or event better postData: {currDate: function() { return date.toJSON(); } }. In case of usage of functions inside of postData the value of the property will be evaluated on every grid load/refresh (see here for more information). If you do want construct url manually like yoou currently do you need use encodeURIComponent or jQuery.param: url: gridDataUrl + '?currDate=' + encodeURIComponent(date.toJSON()) or url: gridDataUrl + '?' + jQuery.param({currDate:date.toJSON()}).
you should never use eval.

UPDATED: I didn't found in the example which you send the jqGrid CSS. If I replace the block with all CSS and JavaScript files with the following lines

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/jquery.jqGrid.min.js"></script>

the described problem is not exist.