Question

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

我真的不是CSS专家。： - （

非常感谢您的努力

亲切的问候 shub01

Answer 1

要让您的叠加层不受#div1的不透明度影响，请将其置于#div1内。你需要使用一个容器：

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

当然，您将在对话框中打开容器：

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

您需要将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;
}

最后，要将叠加层居中，请将其设置为left: 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

Answer 2

一种解决方案可能是使用:after 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;
}

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

Answer 3

尝试将装载程序放在这里：

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

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

3 个答案: