VPF::Всплывающее окно - Форум программистов

Flier

Дата 6.7.2008, 00:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 26.6.2007

Репутация: нет
Всего: нет

Собсно нужно создать всплывающее окно с собственным оформлением.
Оно должно быть поверх родительского окна (обычно родительское "заливается" серым цветом, а всплывающее на переднем плане и не прокручивается вместе с род. окном).

И там должна быть к примеру кнопки "Закрыть", "Загрузить"... т.е. не стандартые жаваскрипт-овские confirm и не window.open()

Пробовал iframe, div, но они жестко привязаны к родительской странице.

Подскажите пож. в каком направлении хоть копать, а то мне немного надоело часами разбирать чужие скрипты=)

Nigel

Дата 6.7.2008, 00:18 (ссылка)

(нет голосов)

Загрузка ...

познаю мир

Профиль
Группа: Участник
Сообщений: 515
Регистрация: 20.11.2007

Репутация: 1
Всего: 19

Это так называемые модальные окна, посмотрите пример тут

Flier

Дата 6.7.2008, 12:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 26.6.2007

Репутация: нет
Всего: нет

Nigel, спасибо большое.

Flier

Дата 6.7.2008, 19:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 26.6.2007

Репутация: нет
Всего: нет

В процессе осмысления возникли некоторые непонятки.... Не хочется разбираться с библами, а написать что-нибудь самому..
Хонемного гуглил но ничего не нашел.

Цитата

Все библиотеки так или иначе используют одну довольно простую идею, а именно — модальное окно создается посредством двух <div> элементов, один из них обычно покрывает всю рабочую область (viewport) браузера, а второй позиционируется поверх второго и собственно, представляет собой модальное окно в которое загружается нужный нам контент.

Первый <div> обычно называется overlay, и бывает прозрачным, для того чтобы создавать визуальный эффект затемнения и таким образом информировать пользователя что данная рабочая область недоступна. Прозрачный <div> создается с помощью CSS, кодом вроде этого:

Код


#overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5000;
background-color:#000;
-moz-opacity: 0.8; /* код для движков Mozilla */
opacity:.80;  /*свойство из спецификации CSS3, которое поддерживается не всеми браузерами*/
filter: alpha(opacity=80); /* код для IE */
}

Возник маленький вопрос...
Как сделать так, чтобы внешний див вместе в внутренним заливали постоянно все свободное место в окне браузера, а не смещались при прокрутке?

Я так понял во внутреннем див-е нужно будет прописать

Код


<a href=# onClick="document.getElementById('out-div-id').style.dispaly=none">Закрыть модальное окно</a>

И модально окно должно пропасть. Но у меня почему-то не получается.
Помогите пож.

Sannis

Дата 6.7.2008, 22:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 375
Регистрация: 14.8.2007
Где: Москва

Репутация: нет
Всего: 13

Может проблема банальная:

Цитата

dispaly

А надо как?

Это сообщение отредактировал(а) Sannis - 6.7.2008, 22:19

--------------------

Я Критик Джим, раньше писал моды для IPB 1.3.x-2.3.x, а теперь продвигаю Node.js в массы.

Flier

Дата 7.7.2008, 15:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 26.6.2007

Репутация: нет
Всего: нет

dispaly - конечно же опечатка, но все равно не работает.
Так никто не подскажет как так сделать (вопрос 1)

Это сообщение отредактировал(а) Flier - 7.7.2008, 15:18

bars80080

Дата 7.7.2008, 15:30 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

а там разве не написано, как закрывать это окно:

Цитата

Для того чтобы вызвать наше модальное окно нам достаточно просто создать ссылку на файл с контентом для загрузки в модальное окно с классом “lbOn”:
<a href="form.html" class="lbOn">Email This</a>
Если необходимо чтобы модальное окно можно было закрыть после его показа, нужно создать вот такой код внутри содержимого модального окна:
<a href="#" class="lbAction" rel="deactivate">Close Lightbox.</a>

Flier

Дата 10.7.2008, 15:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 26.6.2007

Репутация: нет
Всего: нет

Наверное лучше самому разобраться(

vdim

Дата 28.7.2008, 18:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 33
Регистрация: 19.4.2008

Репутация: нет
Всего: нет

А что за средство для показа содержания первого поста используется на этом форуме на страницах со списком тем? После каждой темы стоит знак вопроса, при наведении на который появляется окно с содержанием первого поста. Это и есть модальное окно только без блокировки родительского? Или это что-то другое? Просто интересно.

Нашел ответ на свой вопрос:
http://forum.vingrad.ru/forum/topic-149001...nvas/index.html

Это сообщение отредактировал(а) vdim - 28.7.2008, 18:13

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »