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' );
  }
});

我最终得到一个对话框，其位置使得左上角位于屏幕的中心（或左侧），其宽度似乎完全取决于它包含的文本。有什么明显的东西让我失踪吗？我非常希望整个对话框在两个轴上都居中对齐，宽度不超过600px。

感谢。

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/

jQueryUI对话框的位置和大小

1 个答案: