CODEWITHSUNDEEP
jqueryhtmlpopupwindow
TheMagician
TheMagician

Reputation: 1856

Pop-up window scrolls back to the top when closed

/*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?

Upvotes: 1

Views: 3835

Answers (3)

gowtham ks
gowtham ks

Reputation: 437

try this

$('html, body').animate({ scrollTop: 0 }, 'slow');

Upvotes: 0

TheMagician
TheMagician

Reputation: 1856

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

Upvotes: 2

Alex Sexton
Alex Sexton

Reputation: 10451

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.

Upvotes: 0

Related Questions