Simple JQuery Pop Up

I'm trying to implement the most basic, plain jquery pop up window.

Currently, I'm using the code from this tutorial, and replacing the fades with .open(). The window is popping up, but as the event is bound to multiple links, the user could be clicking on it anywhere, yet the pop-up shows up at the same place, reg开发者_如何学编程ardless of the user's position on the paege.

How do I get the pop up to adjust to the user's position on the page (exactly like the hyperlink pop-up in the SO editor)?

Thanks.

You should check out Shadowbox - http://www.shadowbox-js.com

It can be made as basic as you want and it's very easy to use and implement into your system.

I have bare-bones pop-up interactivity using the .offset() getter and .css('line-height') as a live sample.

The .offset() setter does not produce the expected results on browsers other than Firefox. I believe this is the main reason why trying to get a simple pop up is so "challenging"... In the sample below, note how the .css() setter is used instead of offset():

$('li > a').click(function (event) {
    event.preventDefault();
    var coordinates = $(this).offset();
    var lineHeight = parseInt($(this).css('line-height'));

    if (window.console) { console.log("coordinates.left: " + coordinates.left); }
    if (window.console) { console.log("coordinates.top: " + coordinates.top); }
    if (window.console) { console.log(".css('line-height'): " + lineHeight); }

    $('.PopUpFlow')
        .css('left', coordinates.left)
        .css('top', coordinates.top + lineHeight)
        .show();
});
$('.PopUpFlow p > a').click(function (event) {
    event.preventDefault();
    $(this).closest('div').hide();
});

Instead of <a href="#">, try: <a href="#dialog"> and replace <div id="dialog" class="window"> with <div id="dialog" class="window" name="dialog">

Ultimately, going to "#" is to the top of the current page; by inserting a named anchor where-ever your dialog appears on screen, the viewport will be set such that the named anchor (I.e, the dialog) is at the top of the screen.

do you want to position the pop up relative to another element? (that you click on or hover over etc...)? In that case

popup_location = $('#clickme').offset();

//optional adjust position
popup_location['top'] = popup_location['top'] + 20;
popup_location['left'] = popup_location['left'] + 20;

$('#your_popup').css(tooltip_position);

You can also use Jquery.cluetip to get the same effect. And it will always open over close to the link.