RSS

Chepurnoff

14:27
Всплывающее окно на javascript с html-содержимым
Для нужд сайта было необходимо создать эдакое всплывающее окошко, и чтобы содержимым этого окна был html-код. Вот что получилось. Все адаптировано под легкую установку на сайт системы ucoz.

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

И так вот сам вид этого javascript окна




И как всегда Internet Explorer со своим багом с прозрачностью в файлах png портил всю картину. На IE я давно забил, в большинстве случаев делаю только поверхностную адаптацию и все. Просто воротит от того что я должен дорабатывать недоработки такой казалось бы серьезной конторы как Microsoft. И опять так как IE не поддерживает фиксированную позицию элементов, при прокручивании документа окошко будет дергаться. Ну да ладно, вот как выглядит все это в IE 8



Не очень привлекательно, но сойдет. Те кто сидят через Internet Explorer пусть привыкают)

Как уже было сказано, в окне можно использовать html-код, любой сложности. Главное соблюдать грамматику javascript.
Вот вид окна с html-кодом




Тоже самое в IE



Есть одно ограничение: окно растягивается только по вертикали, по горизонтали ограничение в 500 точек.
Окно закрывается по кнопке, та что внизу справа, или просто если щелкнуть мимо окна.

И так сама установка всплывающего окна на сайты системы ucoz.

Создаем глобальный блок, вставляем в него код из архива и помещаем этот глобальный блок на все страницы, где соответственно вы задумали появление этого окна.
Также создаем в файловом менеджере папку "ajaxtab" и загружаем туда все картинки из архива ниже.

Все установка заверншена, теперь разберемся с вызовом окна. Вызов происходит по javascript функции showA('Заголовок окна', 'Содержимое').
Например вот такая ссылка будет вызывать окно:
<a onclick="showA('Сайт сообщает', 'Ссылка не работает.<br>Увы')">Ссылка</a>



Пример с кнопкой рисунком и заголовком(щелкните)


Сам архив, с инструкцией внутри. И снова если вы используете это окно на своем сайте, не забывайте размещать ссылку на этот сайт, она обязательна. Скачать архив
Категория: От оно как | Просмотров: 3334 | Добавил: chepurnoff | Рейтинг: 0.0/0
Имя*
(12.12.2010 16:24)
[/code][code][/i][i][/b][b]

DPolyakov
(13.12.2010 15:32)
Это умеет делать fancybox

Карра
(13.12.2010 18:03)
Не, правильно, лучше сделать свое, не важно что там чего умеет, желаю развития данной темы, и всетаки к експлореру присмотритесь

ByncBiony
(23.12.2011 02:07)
да, что-то на подобии этого

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]