Всплывающая подсказка на основе Coda Popup Bubbles
| ||||||||||||||||
Создаем всплывающую подсказку на базе плагина к jQuery Coda Popup Bubbles. Внешний вид подсказки целиком зависит от вашей фантазии и умений. В нее можно вставить как таблицу, так и картинки или информер. Вы сами определяете, при наведении на что должна выходить подсказка и что будет в ней.
Сам код плагина Coda Popup Bubbles я перебрал и убрал некоторые ошибки по позиционированию подсказки.
Для начала займемся подключением скрипта. Так Coda Popup Bubbles - это плагин для jQuery, нужно будет подключить и его. Скачать скрипт Coda Popup Bubbles можно здесь. Откройте ссылку и сохраните файл на компьютере. Затем залейте к себе на сайт. Подключить скрипт можно следующим кодом (код ставим в раздел HEAD страницы):
<script src="http://szenprogs.ru/scripts/coda_popup/jquery.coda-bubble.sp.js" type="text/javascript"></script>
Если ваш сайт создан на основе системы UCOZ, то первую строку скрипта можно не ставить. jQuery на UCOZ подключен по умолчанию.
Все, скрипт подключен. Теперь подготовим таблицу стилей CSS для правильного отображения подсказок Coda Popup Bubbles. Стили можно прописать как в файле CSS, так и в теге STYLE, который нужно разместить в разделе HEAD. Представленный код предназначен для размещения его в теле HEAD:
.bubbleInfo{position: relative;}
.popup{position: absolute; display: none; z-index: 50; background: #fff; border: 2px solid #f00;}
</style>
Теперь займемся блоками. Блок с подсказкой должен отвечать определенным правилам и выглядит так:
<div class="trigger">тут текст или картинка, при наведении на которую появится подсказка</div>
<div class="popup">Тут сама подсказка</div>
</div>
Этот блок можно ставить в любое место страницы в пределах тега BODY. Основное правило: структуру блока и классы менять нельзя.
Блок с классом trigger - это блок триггер. При наведении курсора на этот блок будет всплывать подсказка, которая оформлена в блоке с классом popup. Внутри блок popup можно оформить так, как вы желаете. В примере сверху использована таблица с рисунком в качестве фона. Вы можете сделать что нибудь свое.
На этом установка всплывающей подсказки на основе Coda Popup Bubbles закончена. Пользуйтесь и удачи в свершениях!
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 2266 |
| Рейтинг: | 4.4/16 |
| Дата добавления: | 28.11.2009 16:11, Суббота |
| Добавил: | Szen |
| Теги: | jQuery, popup, подсказка |
Рекомендуем
Дополнительно
Мини-форум
| № 0 | Суббота, 28.11.2009 16:11 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Всплывающая подсказка на основе Coda Popup Bubbles". |
| Профиль |
| № 1 | Понедельник, 05.07.2010 11:18 |
Apocalypse | Ссылка на скрипт http://szenprogs.ru/scripts/coda_popup/jquery.coda-bubble.sp.js битая... Подправьте  |
| Профиль |
| № 2 | Понедельник, 05.07.2010 12:44 |
| Szen | Apocalypse, как ни странно, но ссыль активная и рабочая.  Скрипт на месте и никуда не перемещался. |
| Профиль |
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
(SMS):
(WebMoney):
Kimblejcjqzz(40), denisbardas(15), stisurneybrit(49), faremiamume(46), NiteNearianep(40), Dik0n(24).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
