jqGrid / ui-widget-overlay blocks all buttons and tab events on whole page

Question

I'm using the redmond themeroller with my jqGrid. The file jquery-ui-1.8.16.custom.css has this overlay.

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

I think it's supposed to make an overlay on the grid to do styling stuff. But it seems to be covering my whole page and while the grid itself still has mouse events, the rest of the page (including the pager/navigator section of the grid) don't have any mouse events and the buttons don't respond to clicks. The tab outside the grid - also no click event. Even the tab outside that (Main, Users ...) has no events. If I comment out the ui-widget-overlay then all the buttons and tabs work again but the color of the screen gets lighter and the alternating row color in the grid goes just white on every row. Why would this happen?

<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.

Answer 1

ui-widget-overlay is a general jquery ui styling class. It creates an overlay on the element to which you apply this class.

To create overlay on jQgrid you should use class jqgrid-overlay. This will prevent the default mouse click events on grid.
To bring up overlay :

$("#lui_"+gridid).show();  

and to hide it
$("#lui_"+gridid).hide();