Диалог JQuery всегда по центру - PullRequest
Новая
       0

Диалог JQuery всегда по центру

9 голосов
/ 26 сентября 2011

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

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

jQuery - код 

$("<div class='popupDialog'>Loading...</div>").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']);
});

Спасибо!

Ответы [ 5 ]

7 голосов
/ 03 ноября 2011

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

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

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

Я также использую опцию 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
  });

Надеюсь, это кому-нибудь поможет.

4 голосов
/ 26 сентября 2011 
$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

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

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

1 голос
/ 25 июля 2014

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

$( "#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 } );
    });

});
0 голосов
/ 26 июля 2016

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

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

Производительность довольно плохая, но вы можете дождаться окончания изменения размера: jQuery - как дождаться окончания 'конца' события 'resize' и только затем выполнить действие? .

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

$(window).scroll(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});
0 голосов
/ 26 сентября 2011

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

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

Это не работает? У вас есть примерная страница, на которую мы можем посмотреть?

...