Question

Can somebody help me to overlay a div in a jQuery dialog? In my case the image (ajax loading) should be centered horizontally and vertically in the div. It also shouldn’t be affected by the div-opacity.

Have a look at my jsfiddle
http://jsfiddle.net/zhw8B/

I’m really not a CSS expert. 🙁

Thank you very much for your efforts

Kind regards
shub01

Answer 1

To have your overlay not be affected by the opacity of #div1, it cannot be placed inside #div1. You’ll need to use a container:

<div id="container">
    <div class="overlay"></div>
    <div id="div1">
        <form/>
    </div>
</div>

Of course it is the container that you’ll be opening in a dialog:

$("#container").dialog({
  modal: true
});

You’ll need to split your CSS into two selectors. Since .overlay is nothing but a DIV, you’ll need to assign it a height.

#div1 {
    opacity: .5;
}

.overlay {
    background-image: url(http://www.x-works.de/images/ajax_loader.gif);
    background-repeat: no-repeat;
    z-index: 2;
    position: absolute;
    height: 48px;
    width: 48px;
}

Finally, to center the overlay, set it to left: 50% (which will make it start after 50% of the container), and adjust it to minus half its size, to get the center of the overlay, rather than its left corner to be at the center. Then repeat for height:

.overlay {
    background-image: url(http://www.x-works.de/images/ajax_loader.gif);
    background-repeat: no-repeat;
    z-index: 2;
    position: absolute;
    height: 48px;
    width: 48px;
    left: 50%;
    top: 50%;
    margin-left: -24px;
    margin-top: -24px;
}

Working example