2012-05-03 2 views
0

Я делаю всплывающее окно. У меня все сделано, но когда я хочу сделать прозрачность чего-либо за ним (я использую тег body) до 0,6, прозрачность всплывающего окна тоже изменится. Как мне сделать это, когда все, кроме непрозрачности всплывающего окна, отбрасывается? - Заранее спасибо :)Непрозрачность тела, влияющая на всю страницу?

+0

Вопросы, подобные этому, были заданы _ many many__. Посмотрите в столбце «Рядом» справа от этого комментария. – Bojangles

+0

Извините ... я не смотрел, я торопился. –

+1

Посмотрите на источник любой из 5 миллиардов существующих реализаций Lightbox, чтобы узнать, как это делается. – thirtydot

ответ

1

Попробуйте использовать RGBA вместо непрозрачности:

background-color: rgba(0, 0 , 0, 0.5);

Это: красный, зеленый, синий, альфа-прозрачность

1

Ну, мне было интересно узнать об этом вопросе и узнать где-нибудь в Stack Overflow, что дочерний элемент никогда не может иметь непрозрачность выше своего родителя и не переопределять его (а не «официальный» источник, но я поверь в это).

Итак, лучшее обходное решение, которое я видел, помещает ваше всплывающее окно вне элемента с низкой непрозрачностью. Поскольку нет смысла размещать всплывающее окно за пределами <body>, я переношу все содержимое в один div и вывожу всплывающее окно. Например:

Я не могу показать теги тела в JSFiddle, но вот ссылка все равно http://jsfiddle.net/qWRj5/1/

<body> 
<div id="all">Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu 
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu 
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu 
Difirenziatum Tiramisu. 
</div> 

<div id="popup">My Gosh, that is some awful Latin</div> 
</body> 

CSS

#all { opacity: 0.5 } 
#popup { padding: 10px; border: 2px dotted blue; position: absolute; left: 20px; 
    top: 10px; background-color: #fce; } 

+0

Обычный способ сделать это больше напоминает ' содержание страницы

'. – thirtydot

+0

@thirtydot Я действительно хотел, чтобы ваш фрагмент работал :(http://jsfiddle.net/q7Smn/1/ –

+0

С одним из '' было что-то не так, я получаю ту же проблему, когда я напрямую копирую и вставляю HTML Я написал: «Как странно. Вот рабочая версия: http://jsfiddle.net/thirtydot/q7Smn/2/. – thirtydot

Смежные вопросы