Geek Answers Handbook

Transparent overlay div allows you to click a tray in IE 7.8

I have a div containing form elements and I use an invisible overlay mask that should cover my container. But without background, IE 7 and 8 (incorrectly) allows a click.

The solution I found is to use the background color on the overlay div with an opacity of 0.1. This partially works, but in my case the container elements are sortable elements, and when I start sorting, the form elements act weirdly (only when I use the opacity option in jquery sort)

Layout Example:

<div class="sort">
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <input type="text" value="Some" name="test" id="test" />
    </div>
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <select value="Some" name="test2" id="test2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </div>
</div>

CSS

.cont {
    width: 300px;
    position: relative;
    background-color: #aaa;
    padding: 10px;
    margin: 10px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.1;
    filter: alpha(opacity=0.1);
}

JavaScript:

$(function() {
    $('.sort').sortable({opacity:0.8});
});

Live on http://jsfiddle.net/CmU59/4/

Any other workarounds?

+5
3

, , 1x1px PNG ?

+10

background: url (: blank), , ~~

+6

just put background: url(image/url.jpg) no-repeat -999px -999px;and remove the opacity ...

I suggest you use a small image ... but not 1x1 pixel ... 1x2 will be good ... demo

+5
source

More articles:


All Articles