CODEWITHSUNDEEP
jquery-ui
marc
marc

Reputation: 3348

jQuery UI problem centering a dialog

I've got a jQuery dialog box that does display and respond to button clicks correctly. Unfortunately it's always positioned at 0, 0 in the browser window despite my attempts to convince it otherwise. Any ideas?

    var $dialog = $('<div></div>')
  .html('my message')
        .dialog({ autoOpen: false, title: 'my title', position: 'center', bgiframe: true
        });

    $dialog.dialog('option', 'buttons', buttons);
    $dialog.dialog('option', 'position', "center");
    $dialog.dialog("open");

Upvotes: 2

Views: 2134

Answers (4)

otgw
otgw

Reputation: 390

Removing position: 'center' worked for me. Ironic right?

Upvotes: 0

Frank Myat Thu
Frank Myat Thu

Reputation: 4474

I had the same problem.

I did not know how to take my jquery dialog box to center.
I have tried in so many way.
Nothing worked for me.

But finally I found the solution, my solution is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Upvotes: 2

Jon Weers
Jon Weers

Reputation: 1641

jQuery uses the width of the dialog to center it. If it has not been displayed yet, appended to the DOM, or created with a fixed width, then it has no width and can't be centered properly.

To fix, just center after opening:

var $dialog = $('<div></div>')
.html('my message')
.dialog({ autoOpen: false, title: 'my title', position: 'center', bgiframe: true
  });

$dialog.dialog('option', 'buttons', buttons);
$dialog.dialog("open");
$dialog.dialog('option', 'position', "center");

Upvotes: 1

Dan Heberden
Dan Heberden

Reputation: 11068

If it isn't automatically centering, then you have an error in your document markup (a missing closing tag is typically the culprit).

http://jsbin.com/uhago4/edit

Upvotes: 3

Related Questions