jQuery BlockUI Element blocking not working on Firefox

Question

I am trying to block click on links using jQuery blockUI plugin. It's seems to be working fine everywhere, but, Firefox.

this is how it looks in Chrome

and this is how it looks in FF

Here is the javascript code I am using to block/unblock elements

function blockOptions(clsId)
{     
    console.log("block: "+clsId);
    if(clsId!='undefined'){
        var eleToBlock  = "a."+clsId;
        //console.log(id);
        j(eleToBlock).parent().block({message:null,showOverlay: true, css: { opacity: '.5',  backgroundColor: 'black',cursor: 'progress' } });
    }
}

function unblockOptions(clsId)
{
    console.log("unblock: "+clsId);
    if(clsId!='undefined'){
        var eleToBlock = "a."+clsId;
        j(eleToBlock).parent().unblock(); 
    }
}

and here is the HTML for this:

<ul class="left-tab">
    <li title=""><a class="tab-pic1" id="" title="" href="javascript:;">&nbsp;</a></li>
    <li title=""><a class="tab-pic2" id="" title="" href="javascript:;">&nbsp;</a></li>
    <li title="" style="position: relative;"><a class="tab-pic3" id="" title="" href="javascript:;">&nbsp;</a></li>
    <li title="" style="position: relative;"><a class="tab-pic4" id="optio" title="" href="javascript:;">&nbsp;</a></li>
    <li title=""><a class="tab-pic5" id="" title="" href="javascript:;">&nbsp;</a></li>
    <li title="" style="position: relative;"><a class="tab-pic6" id="" title="" href="javascript:;">&nbsp;</a></li>
</ul>

Can anyone suggest what I am doing wrong? I've also checked Alok Swain answer, but, did not worked for me.

Answer 1

Set the applyPlatformOpacityRules option to false in the call to block().

The BlockUI plugin turns off the opacity specifically on Firefox under Linux environments, for some bizarre performance reason. It's mentioned briefly in the FAQ, but it's easy to miss.