Centering jQuery UI dialog
Has anyone faced this before - I have a jQuery UI dialog which is being perfectly centered in FF as well as IE but is stuck to the left in Chrome!
The code is pretty standard. Still, I am copying it below:
<script>
$(f开发者_运维知识库unction() {$('#dialog1 ').dialog({autoOpen: false,
width: 700, height: 400, buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
<div id="dialog1">Hello</div>
It is opened using $("dialog1").dialog("open") when a button is clicked
If you add this to your stylesheet it should fix your problem:
.ui-dialog { margin:0 auto; }
I downloaded the smoothness theme for 1.8.9 two nights ago and had the same issue. Margin css solution works for me. I load additional style rules after the theme to override some of the theme settings. Don't know why it is missing though...
I solved this by binding the window resize event.
var $dialog = $("#dialog");
$dialog.dialog();
$(window).resize(function(e){
var $w = $(this),
$d = $dialog.parent(),
x = $w.width()/2-($d.width()/2),
y = $w.height()/2-($d.height()/2);
$dialog.dialog('option', 'position', [x, y]);
});
Check this demo on jSfiddle.
The latest jquery-ui download has this style for the dialog
.ui-dialog
{
position: absolute;
padding: .2em;
width: 300px;
overflow: hidden;
}
That definitely works in chrome. I think the older version had position: relative so that might be your problem
If someone is having this issue on IE but not on Chrome or FF, try adding some doctype to the page. This worked for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加载中,请稍侯......
精彩评论