Как центрировать диалоговое окно JQuery после изменения размера браузера

Я настоятельно рекомендую использовать медиазапросы css для достижения этой цели и использовать polyfill в качестве запасного варианта, если вы поддерживаете IE8 и ниже.

Вот мое решение на jsfiddle:

http://jsfiddle.net/39GqM/505/

    .ui-dialog {
      min-width: 80%;  
      width: 80% !important;
   } 
   @media only screen and (min-width: 1200px) {
     .ui-dialog {
        width: 1000px !important;
    } 
   }

   @media only screen and (max-width: 1000px) {
    .ui-dialog {
        min-width: 80%;  
        width: 80% !important;
    }
  }

Таким образом, вы будете нацелены на класс .ui-dialog, поскольку jQuery-UI добавляет кучу разметки в DOM, и я помещаю правило! Important, чтобы принудительно переопределить. Не добавляйте ширину диалогового окна при вызове виджета, позвольте CSS обработать это.

$("#dialog").dialog();

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

Для более старых версий браузеров проверьте это репо на github и выполните поиск в окне для медиа-запросов: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Реализация полифилла обычно довольно проста, но, на мой взгляд, это должен быть другой вопрос. Надеюсь, поможет.

Ваше здоровье

Я сделал это в операторе создания внутри параметров диалогового окна. Мой диалог находится в центре экрана.

create : function() {
             $(window).resize(function() {
                $("#myDialog").parent().position({ 
                                    my : "center",
                                    at : "center",
                                    of : window
                                    });
             });
             $(window).scroll(function() {
                $("#myDialog").parent().position({
                                   my : "center",
                                   at : "center",
                                   of : window
                                   });
             });
},

Где в конце диалога я привязал функцию позиционирования.

$("#myDialog").dialog({

 // do stuff
 // also add the positioning with "create"

}).parent().position({
     my : "center center",
     at : "center center+20",
     of : window
 });

скрипка: http://jsfiddle.net/djwave28/yf8fR/4/

Ты пытался :

$(window).resize(function() {
    $("#ticketDetails").dialog("option", "position", "center");
});

Изменить

решение - обновить jQuery до версии 1.8.6 или более поздней версии + jQuery UI до версии 1.9.2. по-видимому, это ошибка, и ее исправили в более новых версиях.

Тот же пример с обновленным jQuery: http://jsfiddle.net/39GqM/490/

ты должен попробовать это

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

-> пример ‹-

связанный вопрос Как автоматически центрировать диалоговое окно пользовательского интерфейса jQuery при изменении размера браузер?

Проблема вызвана тем, что jQueryUI пытается position yourfixed с диалоговым окном, когда его недостаточно доступное пространство - логика коллизий. collision по умолчанию для .dialog() = подходит.

"fit": сдвинуть элемент от края окна.

Я пробовал использовать другие параметры столкновения: перевернуть, перевернуть, нет, но поскольку width="1000px" jQueryUI не может найти подходящего места для диалога.

Если задать диалоговому окну динамическую ширину и привязать событие window.resize(), диалоговое окно всегда будет занимать 80% ширину документа и всегда перемещать по центру. См. демонстрацию

CSS

.width-80 {
  width:80% !important;
}

JavaScript

var $dialog = $('#dialog');
$dialog.dialog({ dialogClass: 'width-80' });

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

HTML

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>