Главная » Файлы » Прочие скрипты » jQuery |
Всплывающая подсказка на основе Coda Popup Bubbles
22.06.14, 15:42:09 | |
![]() Создаем всплывающую подсказку на базе плагина к jQuery Coda Popup Bubbles . Внешний вид подсказки целиком зависит от вашей фантазии и умений. В нее можно вставить как таблицу, так и картинки или информер. Вы сами определяете, при наведении на что должна выходить подсказка и что будет в ней. Сам код плагина Coda Popup Bubbles я перебрал и убрал некоторые ошибки по позиционированию подсказки. Для начала займемся подключением скрипта. Так Coda Popup Bubbles - это плагин для jQuery , нужно будет подключить и его. Скачать скрипт Coda Popup Bubbles можно здесь . Откройте ссылку и сохраните файл на компьютере. Затем залейте к себе на сайт. Подключить скрипт можно следующим кодом (код ставим в раздел HEAD страницы): Код <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script> <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: Код <style type="text/css"> .bubbleInfo{position: relative;} .popup{position: absolute; display: none; z-index: 50; background: #fff; border: 2px solid #f00;} </style> Теперь займемся блоками. Блок с подсказкой должен отвечать определенным правилам и выглядит так: Код <div class="bubbleInfo"> <div class="trigger">тут текст или картинка, при наведении на которую появится подсказка</div> <div class="popup">Тут сама подсказка</div> </div> Этот блок можно ставить в любое место страницы в пределах тега BODY. Основное правило: структуру блока и классы менять нельзя. Блок с классом trigger - это блок триггер. При наведении курсора на этот блок будет всплывать подсказка, которая оформлена в блоке с классом popup. Внутри блок popup можно оформить так, как вы желаете. В примере сверху использована таблица с рисунком в качестве фона. Вы можете сделать что нибудь свое. На этом установка всплывающей подсказки на основе Coda Popup Bubbles закончена. Пользуйтесь и удачи в свершениях! | |
Просмотров: 476 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |