Определение координат объекта
Необходимо чтобы при нажатии на кнопку рядом появлялось небольшое окно с сообщением. Речь идет о кнопке добавления товара в корзину. При нажатии на кнопку "добавить в корзину" рядом с кнопкой появляется маленькое окошко с предложением перейти в корзину.
Не предполагается использование какого-то готового скрипта диалогового окна, т.к. это будет простейшее окно, т.е. просто прямоугольный блок с ссылкой (видимо, обычный div отображенный поверх всего). Т.е. при нажатии на кнопку этот блок будет появляться и все! Вопрос только в том - как спозиционировать этот блок чтобы он появлялся рядом с кнопкой. Ведь кнопка может быть где угодно на странице. И если я правильно понимаю, то сначала нужно получить какие-то координаты кнопки, а потом там же отобразить окно. В jQuery предусмотрены какие-то функции для этого? left и top не подходят, т.к. они будут определяться эти параметры относительно родителя. Мне же нужны координаты относительно страницы. |
$(obj).offset().left; $(obj).offset().top; Вот так можно определить положение элемента относительно документа (независимо от родителей). |
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script> <span style="display:inline-block"><button type="button" onclick="$(this).next().toggle()">Выбрать</button> <span style="padding:12px;display:none;border:red solid 1px;width:100px;height:100px;">Idi W Korsiny!!</span> </span> <span style="position:absolute;z-index:100; top:120px;left:67px;display:inline-block"><button type="button" onclick="$(this).next().toggle()">Выбрать</button> <span style="padding:12px;display:none;border:red solid 1px;width:100px;height:100px;">Idi W Korsiny!!</span> </span> <span style="position:absolute;z-index:100; top:20px;left:367px;display:inline-block"><button type="button" onclick="$(this).next().toggle()">Выбрать</button> <span style="padding:12px;display:none;border:red solid 1px;width:100px;height:100px;">Idi W Korsiny!!</span> </span> |
| Часовой пояс GMT +3, время: 19:47. |