всплывающее окно поверх основного (модальные окна)

[Юзер]

В последнее время для ввода пароля на сайте часто начали появляться симпатичные всплывающие окошка. Например, на сайте http://www.i.ua/ если нажать на вход, то все содержимое страницы покроется такой сероватой дымкой, а в центре страницы появится окошко для ввода пароля. Ну очень мне нравится.

Я пытался смотреть на реализацию в исходниках на разных сайтах, но сама реализация везде сделана по разному и разбираться с готовыми решениями мне непросто.

Может быть где-то есть какие-нибудь материалы, статьи, примеры, в которых разбирают по полочкам подобные варианты?

Или если искать, то что искать то? Когда ввел в поисковик "popup окна", "всплывающие окна", то получил примеры совсем не того, что мне нужно..

{переименовано Tokolist}

[PacMan]

Я сам делал. Ничего сложного вроде нет...

Поверх контента накладывается div с полупрозрачным фоном.

[Юзер]

А можно попродробнее?

Спасибо.

[Юзер]

Кажется, я начинаю понимать, куда копать

filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.6;

[PacMan]

Да не. Просто фон - 1пиксельная полупрозрачная png картинка. Вот.

[Maslakoff]

Блин, это реализуется без накладывания разных картинок.

Например есть скрипт http://www.digitalia.be/software/slimbox

Только там черного цвета.

Есть библиотечки опять же prototype, mootools, где можно кроссбраузено это все подрубить!

[PacMan]

А чем фоновая картинка не кроссбраузерна???

В prototype нет ничего подобного. Он не для того.

[Jenek]

Лучше прикрыть всю страницу div`ом с нужным цветом и opacity, filter.

Преимущества:

- можно сделать эффект fade (постепенного затенения)

- полупрозрачная фоновая картинка в ie6 потребует дополнительных телодвижений

- нет лишних запросов

[Emm]

Кажется, я начинаю понимать, куда копать

там все просто проделано? даже копать не надо..

Firebug в помощь ..

[Tokolist]

это называется "модальные окна"

думаю этой статьи будет достаточно

http://developer.co.ua/posts/view/modalnye...b-prilozhenijax

[Vlad]

Хе-хе, сколько людей, столько и мнений. Короче говоря, есть несколько способов решения задачи.

1. Слой полупрозрачный (через стили) поверх основного контента.

2. Не слой, а рисунок полупрозрачный на PNG, размер 100х100%, поверх него располагаем любые слои.

3. На JS делаем так, что фокус всегда находится в одной текущей форме.

и так далее, можно придумать еще массу подобных фишек.