Диалог jQuery всегда центрирован

Как я могу реализовать, что модальный диалог jQuery с автоматической шириной и высотой всегда сосредоточен в браузере. Также после изменения размера windows браузера.

Следующий код не работает. Я думаю, что проблема заключается в автоматической ширине и высоте.

jQuery – код

$("
Loading...
").dialog({ autoOpen: true, closeOnEscape: true, height: 'auto', modal: true, title: 'About Ricky', width: 'auto' }).bind('dialogclose', function() { jdialog.dialog('destroy'); }).load(url, function() { $(this).dialog("option", "position", ['center', 'center'] ); }); $(window).resize(function() { $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); });

Спасибо!

Фактически, я думаю, что position: ["center", "center"] не будет лучшим решением, так как она назначает эксплимент top: и left: свойства css в диалоговом окне, основанные на размере области просмотра при создании.

Я столкнулся с этой проблемой при попытке создать диалоговый центр на экране по вертикали. Вот мое решение:

В части options моей функции .dialog() я .dialog() position:[null, 32] . null задает значение left: value для стиля элемента, а 32 – только для того, чтобы диалоговое окно было привязано к верхней части windows. Также не забудьте установить явную ширину.

Я также использую параметр dialogClass для назначения пользовательского classа, который является просто dialogClass margin:0 auto; Свойство css:

 .myClass{ margin:0 auto; } 

И мой диалог выглядит так:

  $('div#popup').dialog({ autoOpen: false, height: 710, modal: true, position: [null, 32], dialogClass: "myClass", resizable: false, show: 'fade', width: 1080 }); 

Надеюсь, это помогает кому-то.

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

Рабочий jsFiddle: http://jsfiddle.net/vNB8M/

Диалог центрируется с автоматической шириной и высотой и продолжает центрироваться после изменения размера windows.

Ни один из ответов не сделал то, что я хотел. Для тех, у кого все еще есть проблемы с этим, вот что сработало для меня. Это заставит диалог всегда появляться в центре экрана, и он будет центрировать диалог по мере изменения размера браузера.

 $( "#ShowDialogButton" ).click(function(){ $( "#MyDialog" ).dialog({ show: 'fade' }).dialog( "option", "position", { my: "center", at: "center", of: window } ); $(window).resize(function() { $( "#MyDialog" ).dialog( "option", "position", { my: "center", at: "center", of: window } ); }); }); 

Модальное окно вокруг диалогового windows должно позволить вам разместить диалоговое окно с центром css:

 margin-left:auto;margin-right:auto; 

Не работает ли это? У вас есть страница с образцом, на которую мы можем смотреть?

Это решение работает:

 $(window).resize(function () { $("#myDialog").dialog("close"); $("#myDialog").dialog("open"); }); 

Производительность довольно плохая, но вы можете дождаться завершения изменения размера: jQuery – как дождаться окончания «события изменения размера» и только затем выполнить действие? ,

Я также пробовал это, но я не могу прокручивать ниже или выше позиции элемента, который открыл диалог:

 $(window).scroll(function () { $("#myDialog").dialog("close"); $("#myDialog").dialog("open"); });