Question

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

The solution I found, is to use background color on the overlay div with 0.1 opacity. This is partially working, but in my case the container elements are sortable items, and when I’m starting a sort, the form elements are acting strange (only when i’m using the opacity option on the jquery sortable as well)

Sample Markup:

<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 workaround suggestions?

Answer 1

Although I don’t understand why you would want to overlay your from elements have you considered using a fully transparent 1x1px PNG as your overlay background?