jQuery UI Диалоговое позиционирование - Как сделать его по-прежнему центрированным

Question

В принципе, я бы хотел, чтобы диалог оставался центрированным при изменении размера окна (или переключении на полноэкранное окно).

Также диалоговое окно перетаскивается, и в идеале я бы предпочел, чтобы он остался в перетаскиваемом положении на странице при изменении размера окна. Но если он сместится обратно к центру, я тоже согласился бы на это.

Я попытался установить «position: relative» в классе «.ui-dialog», однако это создает большой пустой пробел внизу страницы; Я не смог понять, что вызывает это, используя инструменты инспектора DOM.

Answer 1

Вы можете сделать это следующим образом:

$("#dialog").dialog({ 
    drag: function() { 
     $.data(this, 'dragged', true); 
    }, 
    open: function() { 
     $.data(this, 'dragged', false);   
    } 
}); 
$(window).resize(function() { 
    $(".ui-dialog-content").each(function() { 
     if(!$.data(this, 'dragged')) 
      $(this).dialog('option', 'position', 'center'); 
    }); 
}); 

You can try out a demo here, это повторно центрирует диалоговые на window.resize только если вы не тащили его, так как он был открыт. Когда мы открываем, мы устанавливаем данные для dragged в false, если мы перетащим его, установите его на true ... и если он еще false (еще не перетаскивается), произойдет повторный центр, иначе мы его оставим в его нынешнем положении.

Хороший вопрос/идеи о перетягивании обнаружения, кстати, это улучшило бы приложение я в настоящее время работаю над, собирается использовать это сам :)