Изменение наложения диалогового окна jQuery при различных значениях прозрачности - PullRequest
Новая
       9

Изменение наложения диалогового окна jQuery при различных значениях прозрачности

1 голос
/ 16 ноября 2011

Может кто-нибудь помочь мне наложить div в диалоге jQuery?В моем случае изображение (ajax loading) должно быть отцентрировано по горизонтали и вертикали в div.На div-opacity это также не должно повлиять.

Посмотрите на мою jsfiddle http://jsfiddle.net/zhw8B/

Я действительно не эксперт по CSS.: - (

Большое спасибо за ваши усилия

С уважением shub01

Ответы [ 3 ]

2 голосов
/ 16 ноября 2011

Чтобы на оверлей не влияла непрозрачность #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;
}

Рабочий пример

1 голос
/ 16 ноября 2011

Одним из решений может быть использование peuso-элемента :after. Проверьте следующее 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/

0 голосов
/ 16 ноября 2011

Попробуйте вместо этого поставить загрузчик: 

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