CODEWITHSUNDEEP
javascriptjqueryhtmlcss
iJade
iJade

Reputation: 23791

Overlay css not working

i'm putting an overlay so that the elements on my page are disabled. On my page there are two elements. One is an anchor tag and another is a file upload input control. File upload control is invisible by default and is triggered on clicking the anchor tag. The problem is i have an overlay over these controls but its not working for the invisible file upload control. During overlay if i click on the file upload area its triggered.Here is jsfiddle Try clicking the PR text in jsfiddle, it shouldn't work due to overlay but is clickable

Here is the html code

<div class="ast">
<div class="notEdit-overlay"></div>
<a id="uploadQrCode" href="#" style="cursor:pointer;">Upload QR Code</a>
P<input id="qrCodeFileUpload" type="file" class="hideQRUpload" />R
</div>

Jquery code

    $('#uploadQrCode').click(function(){
    $('#qrCodeFileUpload').click();
});

And here is the css

    .hideQRUpload
{
    position:absolute;
    opacity:0;
    width:0px;
    height:0px;
}
.notEdit-overlay
{
    width: 1080px;
    height: 99%;
    left: 0px;
    background: red;
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
}
.ast{
    position: relative;
}

Upvotes: 0

Views: 2174

Answers (2)

Manu M
Manu M

Reputation: 1064

Change css for .notEdit-overlay like this

.notEdit-overlay
{
 width: 1080px;
 height: 99%;
 left: 0px;
 background: none;
 position: absolute;
 opacity: 0;
 filter: alpha(opacity=0);
 z-index: 1;
}

should use z-index.

http://jsfiddle.net/T5E8D/3/

Upvotes: 4

C3roe
C3roe

Reputation: 96241

Try adding pointer-events: none for your upload field – http://jsfiddle.net/T5E8D/2/

Upvotes: 2

Related Questions