Как я могу получить всплывающее окно на моем сайте, как Stack Overflow?

Question

Когда я наводю курсор на свое имя пользователя на сайте, оно падает вниз. Я хочу попробовать и реализовать нечто подобное, может кто-нибудь привести меня в направлении, как повторить это? Спасибо!

Answer 1

Просто концепция:

1. Прослушивание событий mouseover (и mouseout).
2. Когда срабатывает событие mouseover, вы создаете / отображаете некоторый HTML-элемент, который находится там, с помощью манипуляции DOM.
3. Вы можете получить дополнительный контент (для отображения в этом окне), используя AJAX.
4. Когда для окна / ссылки запускается mouseout, снова скрыть элемент.

Вы можете использовать JQuery (или любой другой фреймворк), чтобы упростить многое из этого.

Answer 2

Jquery имеет много плагинов для реализации всплывающих окон. Смотреть здесь http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

Answer 3

Очень легко выполнить следующие шаги

1) Подготовьте HTML-код

2) Сделать его в абсолютном положении

3) Прослушивание jquery mouseover и даже событие mouseover.

4) Получить значение смещения родительского элемента, который является событием при наведении курсора

5) Получите левый вал и верхний вал моссовера из Смещения вал.

6) Сделайте .show элемент абсолютного div и поместите его рядом с родительским элементом

Answer 4

Вы можете попробовать этот плагин jQuery: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/