Перемещение скрытого div на ipad

Question

У меня есть div, который скрыт и становится окном модального типа при нажатии кнопки Rate Quote. Кажется, что он хорошо работает на моем ноутбуке, но он не позиционируется правильно на моем ipad 2. Когда в ландшафте он вообще не появляется. Когда он находится в портрете, он отображается внизу страницы под остальной частью содержимого.

Я не уверен, что происходит. Вот Javascript Я использую:

function openquote(){ 
var w = 425; 
var h = 350; 
myleft = (window.screen.width)?(window.screen.width-w)/2:100; 
mytop = (window.screen.height)?(window.screen.height-h)/4:100; 
window.document.getElementById('quotediv').style.marginTop = mytop + 'px'; 
window.document.getElementById('quotediv').style.marginLeft = myleft + 'px'; 
window.document.getElementById('overlay').style.display = 'block'; 
window.document.getElementById('quotediv').style.display = 'block'; 

CSS-это:

#quotediv { 
display:none; 
z-index:99; 
height:338px; 
width:323px; 
position:fixed; 
border-radius:10px; 
border:2px solid #FFF; 
box-shadow: 2px 2px 4px #989898; 
background-color:#8b0202; 
} 

Вы можете просмотреть страницу в http://www.ntxprospec.com/services.html

Спасибо за вашу помощь.

Answer 1

Я проверил страницу в своем браузере и изменил ее размер до тех пор, пока она не исчезла с экрана, поэтому я смог воспроизвести проблему в браузере. Когда я изменил маржу и верхнюю левую сторону, чтобы вместо этого был сверху и слева, проблема исчезла. Недостатком является то, что модаль не центрирован, даже если он становится видимым, а использование JavaScript для центрирования элемента на самом деле немного переборщило. Я рекомендую this post on CSS Tricks для того, как делать то же самое с помощью только CSS. Если вы используете этот подход, все, что вам нужно сделать с помощью функции JavaScript, это show/hide.