LINUX.ORG.RU

Блок «модальное окно»


0

1

Имеется:

<div class="overlay">
  <div class="content">blablabla</div>
</div>
div.overlay {
	background-image: url("../images/diagonals.png");
	background-repeat: repeat;
	background-attachment: fixed;
	z-index: 1001;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	display: none;
	top: 0px;
	left: 0px;
	position: absolute;
}
div.overlay div {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 1011;
	height: 50%;
	width: 50%;
	background: url("../images/whitebox.png") repeat;
	border: 2px solid #000;
	opacity: 1.0;
}

Не хочет, зараза, div.content быть непрозрачным. WTF, собственно? Как его сделать непрозрачным?

whitebox.png - 1x1 белый (именно белый) пиксель. background-color: #fff не спасает.

Пруф: http://ompldr.org/vYmhvcw

Ответ на: комментарий от loginame

Отладчик показывает, что opacity берет из div.overlay div. Изменение в файрбаге показывает, что правда берет. Или там opacity относительный внезапно становится? Типа 1.0 от родительского?

GateKeeper ★★
() автор топика
Ответ на: комментарий от GateKeeper

Типа 1.0 от родительского?

именно :)

если .content поставишь opacity: .5 — получится по факту 0.25

loginame
()
Ответ на: комментарий от loginame

А и правда. Долбаные стандартизаторы-криворучки.

GateKeeper ★★
() автор топика

прозрачность наследуется. Чтобы сделать div прозрачным, нужно бекграунд указывать в RGBA. Что-то вроде background-color: rgba(255,255,255, 0.7); Для картинки нужен png с альфа-каналом.

xpahos ★★★★★
()
Ответ на: комментарий от xpahos

Он и был прозрачный. Хотелка была в том, чтобы в прозрачном диве вложенный сделать непрозрачным. FIAL на пустом месте. Даже с opacity over9k.

GateKeeper ★★
() автор топика
Ответ на: комментарий от GateKeeper

Дети дива с opacity не могут быть непрозрачными. Как обойти это, я тебе написал выше. Вообще, если там нет особо изощренных бекграундов, то все закругления углов, градиенты и прочее отлично делаются через CSS.

xpahos ★★★★★
()
  div.overlay {
    background-color:transparent
  }
enep ★★★★★
()
Ответ на: комментарий от xpahos

Вынес уже div.overlay-content из div.overlay. Печально, что так. Вообще, нелогично, что opacity у детей первого порядка считается от прямого родителя в процентах от него, но при этом указать значение opacity больше единицы невозможно. По идее итоговый вычисленный opacity не должен быть больше 1, а так, хоть 9k у потомка, если родительский вычисляется в сотые и тысячные доли процента.

GateKeeper ★★
() автор топика
Ответ на: комментарий от GateKeeper

так подожди...

исходя из твоего примера, ты можешь сделать для div.overlay пнг с альфа-каналом (diagonals.png) с нужной тебе прозрачностью и просто положить её бекгроундом, opacity не использовать вообще.

Тогда в него спокойно можно положить и div.overlay-content, да и в ИЕ7 работать будет.

как вариант...

loginame
()
Ответ на: комментарий от loginame

Я без понятия, что такое «альфа-канал в пнг». Картинку дернул из jQuery UI, а они, видимо, не спроста используют именно такую же схему: оверлей не является родителем для модального диалогового окна. Просто я думал, что моя жёппа хитрее.

GateKeeper ★★
() автор топика
Ответ на: комментарий от GateKeeper

альфа-канал - это «вместо белого сделать прозначность».

Печально, что так. Вообще, нелогично, что opacity у детей первого порядка считается от прямого родителя в процентах от него,

а от кого ты предлагаешь наследовать?

но при этом указать значение opacity больше единицы невозможно.

эмм, как ты представляешь себе на 500% не прозрачную поверхность? 0 - 0%, 1 - 100%.

xpahos ★★★★★
()
Ответ на: комментарий от xpahos

эмм, как ты представляешь себе на 500% не прозрачную поверхность? 0 - 0%, 1 - 100%.

Потомок считает «непрозрачность» от родителя (и далее по цепочке вверх). Родительский вычисленный 0.5. Т.о. у текущего элемента opacity: 0.5; будет вычислено в 0.25 абсолютной непрозрачности. А, значит, логично было бы, если бы opacity: 2.0 у текущего элемента с указанным родителем было вычислено в 1.0 абсолютной непрозрачности.

А сейчас приходится из**ываться с 2 sibling, при этом уже получается какой-то лютый пушнозверь при попытке задействовать, например, jQuery.datepick. Не показывает попап, хоть тресни.

GateKeeper ★★
() автор топика
Ответ на: комментарий от GateKeeper

Потомок считает «непрозрачность» от родителя (и далее по цепочке вверх). Родительский вычисленный 0.5. Т.о. у текущего элемента opacity: 0.5; будет вычислено в 0.25 абсолютной непрозрачности. А, значит, логично было бы, если бы opacity: 2.0 у текущего элемента с указанным родителем было вычислено в 1.0 абсолютной непрозрачности.

а что мешает написать 10 или 100 или 1000? тогда как будет считаться opacity?

А сейчас приходится из**ываться с 2 sibling, при этом уже получается какой-то лютый пушнозверь при попытке задействовать, например, jQuery.datepick. Не показывает попап, хоть тресни.

накосячил в кофешопе, обнаружил письку в жопе. Надо было изначально думать и использовать png с альфаканалом.

xpahos ★★★★★
()
Ответ на: комментарий от xpahos

а что мешает написать 10 или 100 или 1000? тогда как будет считаться opacity?

То, что, видимо, свойство opacity перед началом вычисления абсолютного значения для элемента приводится к [0;1]. Ставь хоть 100500, более 100% от текущего унаследованного не выйдет. Об этом и говорил, когда поминал кривожопых стандартизаторов.

Надо было изначально думать и использовать png с альфаканалом.

Нет у нас дезингера и приходится верстать самому. При этом для упрощения разработки как со стороны серверсайд, так и со стороны жабаскрипта, хотелось сразу запихнуть всё это в 1 элемент. Напрасно хотелось. Хотя, надо попробовать с этой diagonals.png погонять. Как там, говорите, ее прозрачной делать (на ишаков положить, они не таргет-браузеры для чисто технического внутреннего продукта)?

GateKeeper ★★
() автор топика
Ответ на: комментарий от loginame

Огромное спасибо loginame

Вот теперь можно точно перезакрыть тред.

GateKeeper ★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.