Centering a JQuery Dialog Box

Question

I have a JQuery dialog box that is set to

position: 'center'

Now I run a database query and return a long list of records, and each record has an "edit" button. If I scroll down the page and click the edit button for the record jquery pops open my dialog and centers the dialog based on the scroll position, but it also reset the page scroll back to the top, so now the dialog is no longer centered.

So my questions are,

1. Can I stop Jquery from resetting my scroll position when the dialog opens?

2. How do I set the postion to center without using the 'center' keyword?

Answer 1

You must be using a jQuery plugin that you aren't telling us about, because "center" is not a valid value for the "position" property. However, I assume you have your edit button set up as a link with its href value set to "#". This is what's causing the jump. To prevent this, return false within your click event handler on that button:

$('a.edit').click(function () {
    // logic goes here
    return false;
});

Answer 2

Tony, your "button" is actually a link, with href set to "#" and an onclick handler which does the real work.

The browser interprets that as "go to a nonexistant anchor," and goes to the top of the page.

Restlessdesign is right if you're using jQuery events. If you're defining your onclick handler in markup, then do something like:

<a href="#" onclick="doSomething();return false();" ...

Answer 3

This is what worked for me.

In my function,

function myedit()
{
....
return false;
}

with the link,

<a href='#' onclick='return myedit();' >edit</a>

Answer 4

I know this is an old post, but I just ran into this problem where my dialog wasn't centering, so thought I would post for anyone else that may come across this. In my page I am also using the jQuery Dimensions plugin.

If I loaded the dimensions script after the jQuery UI script it would break the dialog positioning. Loaded before the jQuery UI and the dialog worked as expected.