How can I get a pop up on my site like Stack Overflow?
When I hover over my username o开发者_开发技巧n the site it drops down a box. I'm wanting to try and implement something similar can someone lead me in the direction of how to replicate this? Thanks!
Just the concept:
- Listen for
mouseover
(andmouseout
) events. - When the
mouseover
event is triggered, you create/show some HTML element that is positioned there using DOM manipulation. - You can get additional content (to show in that box) using AJAX.
- When
mouseout
is triggered for the box/link, hide the element again.
You can use JQuery (or any other framework) to simplify a lot of that.
Jquery have many plugins to implement popups.Watch here http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
You can try this jQuery plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It should very easy follow the below steps
1) Make your html ready
2) Make it absolute positioned
3) Listen to jquery mouseover even ad mouseover event.
4) Get the offset value off parent elemet which is mouseover event
5) Get the left val and Top Val of the mosueover from Offset val.
6) Do a .show on the absolute div item and position it next to the parent elemet
精彩评论