Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery dialog always opens top left

Tags:

jquery-ui

My jQuery dialog always opens in the top left corner of my browser window.

The following shows my code after simplification.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').click(function(event){
    $(function() {
        $('#dialog').dialog({
            autoOpen: false,
            width:500,
            height:500,
            position:'center'
        });
    });
    $('#dialog').dialog('open');
});
</script>
</body>
</html>

Any ideas on what I need to do so that it opens positioned in the center?

like image 851
wurzel_gummidge Avatar asked Jan 02 '13 21:01

wurzel_gummidge


2 Answers

It is highly1 unlikely that this is the cause of your problem, but I was having the same issue, and found this bit of code in jquery-ui.js :

// /1.10.0/jquery-ui.js:
target = $( options.of )
...
// line 12053 
if ( target[0].preventDefault ) {
    // force left top to allow flipping
    options.at = "left top";
}

That bit of code checks to see if the target element has the preventDefault function defined. By default, target[0] is going to equal the window object, which does not have preventDefault. However, in my case, I had defined a function called preventDefault in the window object's global scope. My window.preventDefault caused the if-block to evaluate to true, thus overriding the default options.at value of "center".

As I said, it's highly1 unlikely that you have defined the function window.preventDefault, but that is what caused it for me.

1EDIT: based on the comments, it is actually not so unlikely. Glad I could help everyone.

like image 127
Walter Stabosz Avatar answered Sep 21 '22 14:09

Walter Stabosz


Use this

<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').on('click', function(event){
    $(function() {
        $('#dialog').dialog({
            autoOpen: false,
            position:'center'
        });
    });
    $('#dialog').dialog('open');
});
</script>​

Greetings.

like image 36
MG_Bautista Avatar answered Sep 18 '22 14:09

MG_Bautista