Pop-up window scrolls back to the top when closed

Question

/*CSS */  
#popup { background-color: #fff; border: 1px #000 solid; display: block; position: fixed; padding: 20px; top: 200px; left: 50%; margin-left: -300px; width: 600px; z-index: 1; }

/* JQuery */
$('#show-popup').live('click', function() 
    {
     var tempWindow = $('<div id="popup">This is a draggable pop-up window created with JQuery and JQuery UI <a href="#" id="popup-close">Close</a></div>').draggable();
     $('body').append(tempWindow);
    });

$('#popup-close').live('click', function()
{
 $(this).parent().remove();
});

/* HTML */
<a href="#" id="show-popup">Open popup window</a>

The pop-up works, it opens normally, you can drag it around the page and it sticks to its position, but when you close it, it scrolls back to the top of the page. How can I prevent this?

Answer 1

On the close event, save the coordinates of the the window in a variable.

var coords = $('#popup').position();

Then when you open it back up set it to the same location.

$('<div id="popup">...</div>').css({position: 'absolute', top: coords.top, left: coords.left});

There is some logic missing here since you don't have a ton of details, but this should do the trick.

Answer 2

Figured it out; Forgot to return false when the close link was clicked so it redirected to page.php#.