jqGrid / ui-widget-overlay блокирует все кнопки и события вкладок на всей странице

Я использую redmond themeroller с моим jqGrid. В файле jquery-ui-1.8.16.custom.css есть это наложение.

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Я думаю, что это должно сделать наложение на сетку, чтобы сделать стилизацию. Но он, похоже, покрывает всю мою страницу, и в то время как сама сетка по-прежнему имеет события мыши, остальная часть страницы (включая секцию пейджера/навигатора сетки) не имеет никаких событий мыши, и кнопки не реагируют на нажатия. Вкладка за пределами сетки - также не имеет события щелчка мыши. Даже вкладки за пределами этой вкладки (Main, Users ...) не имеют событий. Если я закомментирую ui-widget-overlay, то все кнопки и вкладки снова работают, но цвет экрана становится светлее, а цвет чередующихся строк в сетке становится просто белым для каждой строки. Почему так происходит?

<link rel="stylesheet" type="text/css" media="screen" href="/plugins/snap/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/plugins/snap/jqModal.css" />
<script src="/plugins/snap/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery.jqGrid-4.2.0/src/jqModal.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery.jqGrid-4.2.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery.jqGrid-4.2.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

<style type="text/css">

</style>

<script type="text/javascript">
$().jquery;

function switch_tabs(obj)
{
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).show();
    obj.addClass("selected");
}

var lastsel_devinfo;
$(document).ready(function() {

    $('.tabs a').click(function(){
        switch_tabs($(this));
    });

    switch_tabs($('.defaulttab'));

//$('#devInfo").jqGrid('navGrid','#pager',{},{zIndex:1234},{zIndex:1234},{zIndex:1234},{multipleSearch:true,overlay:false});
 var initialized = [false, false];

    jQuery("#devinfo").jqGrid({
       url:'/plugins/snap/manageList.php?q=3',
        datatype: "json",
        height: 200,
        altRows:true,
        navigator: true,
        pager: '#pager',
        rowNum: 50,


        colNames:['ID','Managed By', 'Serial Number', 'Share Name', 'Device Name','inode'],
        colModel:[
            {name:'id',index:'id',title:false, width:50, sorttype:"int", editable: false},
            {name:'owner',index:'owner',title:false,align:'center', width:100,editable: false},
            {name:'serial',index:'serial',title:false,align:'right', width:225, editable: true},
            {name:'share',index:'share', title:false,width:225,editable: true,editoptions:{size:15,maxlength:30}},
            {name:'name',index:'name',title:false,align:'center', width:90,editable: false},
            {name:'inode',index:'inode',title:false, width:50,editable: false},
        ],
        afterInsertRow: function(rowid, aData, rowelem)
        {
           if ( aData.share != "" && aData.owner == 'unraid' ){
               jQuery("#devinfo").setCell(rowid,'share','',{color:'red'},{'title':"Sorry, can't edit this share name because the device is now managed by unraid."});
           }
        },
        onSelectRow: function(id){
        if(id ) {
            if (  id!==lastsel_devinfo){
                jQuery('#devinfo').jqGrid('restoreRow',lastsel_devinfo);
                var cm =jQuery('#devinfo').jqGrid('getColProp','serial');
                var id = jQuery("#devinfo").jqGrid('getGridParam','selrow');

                var ret = jQuery("#devinfo").jqGrid('getRowData',id);

                if ( ret.owner != 'unraid' ) {
                    var extraparam=new Array();
                    extraparam['serial']=ret.serial;
                    extraparam['oldShareName']=ret.share ;
                    extraparam['owner']=ret.owner ;
                    jQuery('#devinfo').jqGrid('setGridParam',{
                        url:"/plugins/snap/manageList.php?q=1", postData: { serialNumber: ret.serial }
                        });
                    cm.editable = false;

                    jQuery('#devinfo').jqGrid('editRow',id,true
                        ,null      //oneditfunc
                        ,function(response) {
                            var obj=jQuery.parseJSON(response.responseText);
                            if (obj.error) return false;
                            else return true;
                            }
                        ,"/plugins/snap/manageList.php?q=1"
                        , extraparam //extraparam
                        , aftersavefunc //aftersavefunc
                        ,null //errorfunc
                        ,null //afterrestorefunc
                        );

                    }
                    cm.editable = true;
                    lastsel_devinfo=id;


            } else {
                jQuery('#devinfo').jqGrid('restoreRow',lastsel_devinfo);
                lastsel_devinfo="";
                jQuery('#devinfo').jqGrid('resetSelection');
                }
            } //if(id && id
        },  //onSelectRow
        caption: "S.N.A.P."

    //});  //jQuery("#devinfo")
    //jQuery("#devinfo").jqGrid('navGrid','#pager',{ view:false,edit:false,add:false,del:false,search:false});
    }).navGrid( '#pager',{ view:false,edit:false,add:false,del:true,search:false},{zIndex:1234},{zIndex:1234},{zIndex:1234},{multipleSearch:true,overlay:false}).jqGrid('navButtonAdd','#pager',{
        caption:"Add",
        buttonimg:"",
        position:"last" ,
        title:"Add New Row",
        onClickButton: function(){
            alert("Adding Row");
            var datarow = { serial:"test", share:"test" };
            //var su=jQuery('#devinfo').jqGrid('addRowData', 0, datarow, 0);
            jQuery('#devinfo').jqGrid('editGridRow', "new", {});
            }
        }) ;
$('.ui-jqgrid-titlebar-close','#gview_devinfo').remove();

});

function aftersavefunc(rowid, response) {
         //this writes the owner from the server response to the owner cell in the just edited row.
         //because creating will change that cell.
         var obj=jQuery.parseJSON(response.responseText);
         if (obj.error) grid.jqGrid('restoreRow',lastSel);
         else {
              jQuery("#devinfo").jqGrid('setCell',rowid,'owner',obj.owner);
              jQuery('#devinfo').jqGrid('resetSelection');
              }
    }





//jqGrid: how to change cell padding
//http://stackoverflow.com/questions/3015201/jqgrid-how-to-change-cell-padding
</script>



<?PHP
//phpinfo();
//require_once 'jsonwrapper.php';
//include("jqgrid-php-v1.2/inc/jqgrid_dist.php");
//$grid->navigator = true;

?>

<style type="text/css">


body {
    font-family:Arial;
}
#wrapper {
    width:80%;
}
ul.tabs {
    width:250px;
    margin:0;
    padding:0;
}
ul.tabs li {
    display:block;
    float:left;
    padding:0 5px;
}
ul.tabs li a {
    display:block;
    float:left;
    padding:5px;
    font-size:0.8em;
    background-color:#e0e0e0;
    color:#666;
    text-decoration:none;
}
.selected {
    font-weight:bold;
}
.tab-content {
    clear:both;
    border:1px solid #ddd;
    padding:10px;
}
</style>


<div id="wrapper">
    <ul class="tabs">
        <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
        <li><a href="#" rel="tabs2">Tab #2</a></li>
        <li><a href="#" rel="tabs3">Tab #3</a></li>
    </ul>

    <div class="tab-content" id="tabs1">
<table id="devinfo" class="scroll"></table>
       <div id="pager" class="scroll" style="text-align:right;">></div>

    </div>
    <div class="tab-content" id="tabs2">Tab #2 content</div>
    <div class="tab-content" id="tabs3">Tab #3 content</div>
</div>




   <input type="button" onclick = "javascript:add();" value ="add" />
   Click Row to edit Share Name, press ENTER to save or ESC to cancel.