Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Прозрачный слой на весь экран (https://javascript.ru/forum/dom-window/6293-prozrachnyjj-slojj-na-ves-ehkran.html)

warobushek 22.11.2009 18:52
Прозрачный слой на весь экран
 
Тема, наверно, изъезженная. Но нужно срочно, а нагуглить чего-то не получается.
Нужно создать слой на всю высоту страницы.
Я делаю так

Код:
#overlay {
        float:top;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 30000;
        background-color:black;
  filter:alpha(opacity=50);
  -khtml-opacity:0.5;
  -moz-opacity:0.50;
  opacity:0.50;
}
Похоже, что определить полную высоту можно только с помощью Javascript.
Если вам не трудно, то дайте ссылки на примеры создания таких слоев.

На одном из форумов упоминались библиотеки x.js и prototype.js.
x.js найти никак не могу.
prototype.js нашел, но разбираться в ней времени нет((

Octane 22.11.2009 19:58
Цитата:
Сообщение от warobushek
float:top;
Что это? С CSS тоже нет времени разбираться?

JavaScript tutorial - Window size and scrolling
Изменение страницы посредством DOM
Пример с использованием jQuery

subzey 22.11.2009 21:09
Учим css.
Если у элемента высота указана в процентах, а у элемента, от которого считается его высота (непосредственный родитель, или offsetParent, если у элемента position отличен от static) высота auto, у самого элемента высота считается auto.
Вас может спасти position:fixed.

subzey 22.11.2009 21:17
Вариант "нумеро дуо":
Код:
html {width: 100%;height: 100%; position:relative}
body {height: auto; min-height: 100%; position: static}
Если, конечно, верстка позволяет.

parzh-junior 23.11.2009 21:12
Действительно, это намного проще решается через CSS!
Добавляем к HTML-коду вот это:
<p id="allScreenLayer"></p>

и вот это (CSS):
#allScreenLayer {
position: absolute; // абсолютное позиционирование
width: 100%; // во всю ширину страницы
height: 100%; // во всю высоту страницы
background: gray; // цвет наложения (серый)
opacity: 25%; // видимость (непрозрачность)
}

parzh-junior 23.11.2009 21:14
А вообще, как и пользователь Octane, советую Вам, warobushek, по вопросам CSS заходить на сайт http://htmlbook.ru/css. Там всё написано чётко, ясно, с примерами.


Часовой пояс GMT +3, время: 16:20.