jQuery popup resize по телефону

Question

У меня есть небольшая проблема с отображением всплывающего окна в мобильном браузере. Всплывающее окно отображается щелчком мыши, а затем функция изменения размера устанавливает размер в соответствии с размером области просмотра.

Это прекрасно работает и сосредоточено в области просмотра при открытии, но когда я наклоняю телефон к ландшафту, я вызываю функцию изменения размера, но она не работает должным образом, поскольку недавно измененное изображение отключено от центра в окне просмотра, это повторяется, когда телефон возвращается в портретный режим. Я проверил код на браузере браузера android.

Функция изменения размера я использовал это следующим образом:

$(window).resize(function() { 
    $(".dialogContent").css({ 
     position: 'absolute', 
     left: ($(window).width() - $(".dialogContent").outerWidth())/2, 
     top: ($(window).height() - $(".dialogContent").outerHeight())/2 
    }); 
}); 

Answer 1

К сожалению о публикации в качестве ответа, но я до сих пор не могу пока комментировать.

Основываясь на том, что вы сказали, я немного смущен о части вашего кода мыши. Ужасно функция изменения размера не вызывается, когда пользователь нажимает кнопку в первый раз. так что вы уверены, что он работает так, как вы хотите?

Чтобы ответить на ваш вопрос с ограниченным количеством понимания того, что ваш код выглядит

это должно быть что-то вроде:

$(".dialogContent").css({ 
    position: 'absolute', 
    left: '50%', 
    'margin-left': $(".dialogContent").outerWidth()/2, 
    'margin-top': $(".dialogContent").outerHeight()/2, 
    top: '50%' 
}); 

От моего понимания к выравнивания по центру, расположенного абсолютными вы установите его сверху и оставлено до 50%, а затем смещено на абсолютный элемент пополам.

Теперь, когда я дома, я могу сделать вас fiddle here