jQuery对话框覆盖不同div不透明度的更改位置

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.

有人可以帮我在jQuery对话框中叠加div吗？在我的情况下，图像（ajax加载）应该在div中水平和垂直居中。它也不应受div-opacity的影响。

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

看看我的jsfiddle http://jsfiddle.net/zhw8B/

I'm really not a CSS expert. :-(

我真的不是CSS专家。 :-(

Thank you very much for your efforts

非常感谢你的努力

Kind regards shub01

亲切的问候shub01

3 个解决方案

#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:

要使叠加不受＃div1的不透明度影响，它不能放在＃div1中。你需要使用一个容器：

<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.

您需要将CSS拆分为两个选择器。由于.overlay只是一个DIV，你需要为它指定一个高度。

#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:

最后，将叠加设置为中心，将其设置为左：50％（这将使其在容器的50％之后启动），并将其调整为其尺寸的一半，以获得叠加的中心，而不是其左上角在中心。然后重复高度：

.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

工作实例

#2

one solution could be the use of :after peuso-element. Check the following css:

一种解决方案可以是使用：peuso-element之后。检查以下css：

.overlay{
    opacity:.5
}
.ui-dialog:after {
    background-image: url("http://www.x-works.de/images/ajax_loader.gif");
    background-position: center center;
    background-repeat: no-repeat;
    content: "";
    height: 100%;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    opacity:1;
}

Demo: http://jsfiddle.net/U4JGK/

演示：http：//jsfiddle.net/U4JGK/

#3

Try to put the loader here instead:

尝试将装载机放在这里：

.ui-autocomplete-loading {
background: transparent url(http://www.x-works.de/images/ajax_loader.gif) no-repeat !important;
width:48px;
margin:0px auto;

#1