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

我最终得到一个对话框,其位置使得左上角位于屏幕的中心(或左侧),其宽度似乎完全取决于它包含的文本.有什么明显的东西让我失踪吗？我非常希望整个对话框在两个轴上对齐,宽度不超过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/