Как создать всплывающую подсказку в стиле BBC (facebox?)

Question

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

На домашней странице погоды BBC, http://news.bbc.co.uk/weather/, вы увидите небольшую метку справки в кружке в верхнем правом углу или в некоторых полях. Когда вы нажимаете на нее, появляется всплывающее окно с подсказкой, которое выглядит немного похоже на фейсбокс.

Главное, что мне нравится в этом, это маленькая стрелка, которая указывает назад на кнопку справки справа от контейнера. Facebox - это просто стандартный квадрат.

Если кто-нибудь знает, как воспроизвести это, то будет очень признательна за помощь.

С уважением, Ian

Answer 1

Эффект известен как модальное окно и популяризировался в основном библиотекой javascript Lightbox . В настоящее время существует множество библиотек для создания такого эффекта, но наиболее популярные обычно используют jQuery JavaScript framework .

Моя личная любимая реализация jQuery - ColorBox (легкий, настраиваемый плагин лайтбокса для jQuery 1.3 и 1.4). Посмотрите на Другие типы контента section на их демонстрационной странице , чтобы найти примеры чего-то похожего на BBC.

Answer 2

Я сделал нечто похожее на это, используя скрытый DIV на странице. Затем я прикрепил событие javascript к значку (?), Чтобы переключить видимость DIV. Мне кажется, что для формы «всплывающего окна» это может быть просто фоновый рисунок.

У меня есть пример этого на www.sitemills.com/prices.php, если вам интересно. Совершенно уверен, что javascript встроен, так что вы должны иметь возможность сделать источник представления.