EDIT: rewrote this to be html only
In the following code, why is the jquery dialog that's displayed not centered? The dialog is opened by clicking the "test" button on the page.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script>
function showDialog() {
$("#dialog-modal").dialog({
resizable: true,
height: 140,
modal: true,
position: 'center',
buttons: {
'Yes': function () {
$(this).dialog("close");
return true;
},
'No': function () {
$(this).dialog("close");
return false;
}
}
});
}
</script>
</head>
<body>
<div style="width:800px; height:800px; border:solid 1px red;">
<div id="dialog-modal" title="Basic dialog"></div>
<input type="button" value="test" onclick="showDialog();"></input>
</div><!-- End demo -->
</body>
</html>