Диалог пользовательского интерфейса jQuery: неправильное положение, если видны полосы прокрутки

У меня есть большой контейнер с полосами прокрутки.

В середине этого контейнера откроется модальное диалоговое окно с пользовательским интерфейсом jquery.

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

Я добавил из этой темы Can JQuery UI Диалог запоминает свою позицию между открытием и закрытием следующей части:

beforeclose: function(){
   $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
}

Если я удалю эту часть, диалоговое окно откроется после перетаскивания/перемещения всегда поверху страницы.

Кроме того, если диалог открывается внизу, движения становятся еще более безумными.

Мой код:

$("#btnTest").click(function(){
  if ($("#exec").length == 0) {

            $('body').append('<div id="exec" style="width:320px;background-color: #000;display:none;">xxx</div>');

          $("#exec").dialog({
            width: 320,
            modal: true,
            position: "center",
            show: { effect: "slide", direction: "up", duration: 400 },
            hide: { effect: "slide", direction: "up", duration: 400 }
         });
       } else {
            $("#exec").dialog("open");
        }
 });

$("#btnClose").click(function(){
    $("#exec").dialog('close');
});

Проверьте это @ jsfiddle: http://jsfiddle.net/EDkk6/4/< /а>


drag-and-drop jquery jquery-ui jquery-dialog
person Keith L.    schedule 10.09.2012    source источник
comment
Я считаю, что проблема в том, что вы не принимаете во внимание родительский div, который создается вместе с самим модальным. Если вы получите смещение родительского div, все будет работать правильно. Проверьте мой ответ для получения дополнительной информации и демонстрации.   -  person Josh Mein    schedule 10.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, что разница в верхней позиции модального окна составляет 20 пикселей при повторном открытии. Я считаю, что это связано с тем, что диалоговое окно пользовательского интерфейса создается в родительском div, который вы не учитываете в своем смещении. Поэтому вам нужно получить смещение на основе родителя следующим образом:

beforeclose: function () {
    var $parent = $(this).parent();

    $(this).dialog('option', 'position', [$parent.offset().left,$parent.offset().top]);
}

ЖИВАЯ ДЕМО

person Josh Mein    schedule 10.09.2012
comment
@Keith Это решает вашу проблему? У вас все еще есть проблемы? - person Josh Mein; 20.09.2012
comment
Он работает, но только с верхними кнопками. С кнопками внизу не работает. - person Keith L.; 26.09.2012

arrow_upward
0
arrow_downward

Замените следующую строку:

beforeclose: function(){
   $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
}

с:

beforeclose: function(){
   $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top-20]);
                                                                                     ^^ Added -20 with offset().top
}

ПОСМОТРЕТЬ ДЕМО

person Ahsan Khurshid    schedule 10.09.2012