jquery-ui - jQueryUI 对话框位置和大小

Question

我正在尝试使用 jQueryUI 创建一个对话框，但遇到了两个我没想到的问题，并且没有找到似乎对我有用的解决方案。使用此代码:

$( '<div/>' ).load( $this.attr( 'href' ) ).dialog({
  height: 'auto',
  maxWidth: 600,
  position: 'center',
  resizable: false,
  title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
  width: 'auto',
  resize: function( e, ui ) {
    $(this).dialog( 'option', 'position', 'center' );
  }
});

我最终得到一个对话框，它的位置使得左上角位于屏幕的中心(或附近)，其宽度似乎完全取决于它包含的文本。有什么明显的东西我失踪了吗？我真的希望对话框作为一个整体在两个轴上居中对齐，并且宽度不超过 600 像素。

谢谢。

Answer 1

您的 width: 'auto'是罪魁祸首，我想。另外，resize功能不适用于浏览器窗口是否调整大小，这只是如果您resize对话框本身。自从您设置 resizable至 false ，这不会发生。

设置一个minWidth怎么样？还有吗？

$( '<div/>' ).attr('id', 'my-dialog').load( 'hello.html' ).dialog({
  height: 'auto',
  maxWidth: 600,
  minWidth: 500,
  position: 'center',
  resizable: false,
  title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
});

$(window).resize(function(){
    $('#my-dialog').dialog( 'option', 'position', 'center' );
});

文档中的更多信息: http://api.jquery.com/resize/