В Google+ в самом низу есть кнопка "Оставить отзыв", по нажатию на которую экран гасится и вы можете выделять мышкой разные блоки, отзыв о которых вы хотите написать. Хотел спросить принцип реализации такого функционала с помощью javascript или любой js библиотеки. (У кого нет аккаунта в Google+ могу выслать приглашение.)
1 ответ
var comment_mode = false;
$("*").live('click', function () {
if (comment_mode) {
openCommentForm(domPath($(this)));
}
})
function domPath(element) {
var path = element.tagName + "." + element.className + "#" + element.attr('id');
if (element.parent()) {
path = domPath(element.parent()) + '/' + path;
}
return path;
}
Функция openCommentForm
просто создает div размерами 100500px*100500px, заливает полупрозрачной PNG-шкой, а в нем - Iframe с формой. Думаю, ничего сложного.
По поводу отслеживания наведения:
Можно отслеживать координаты,
Можно склонировать содержимое "BODY", со всеми габаритами, но без цвета,
Можно перекрасить каждый элемент(понасоздавать классов dark)
Можно все элементы делать полупрозрачными(opacity), а потом подкрашивать бэкграунд "body" в темно-серый/черный. Пожалуй, это самое забавное решение: не создается ничего лишнего.
P.S. код не проверял. Воспринимайте как псевдокод, а не как готовое решение.
-
Интересует сам принцип, когда водишь мышкой по затемненному фону и наводишь на элемент, этот элемент выделяется и показывается из под дива. Как такое реализовать, ведь все элементы под дивом, событий не повесишь на сам элемент, неужели отслеживаются координаты мышки и если они соответствуют координатам блока(которые заранее были введены), то этот блок просто показывается из под затеняющего дива? 19 авг 2011 в 14:26
-