Позиция и размер диалога jQueryUI - PullRequest
Новая
       8

Позиция и размер диалога jQueryUI

4 голосов
/ 11 октября 2011

Я пытаюсь создать диалог с помощью 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.

Спасибо.

1 Ответ

5 голосов
/ 11 октября 2011

Ваш 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/

...