Jump to content
  • 0

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


Юзер
 Share

Question

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

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

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

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

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

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy