вертикально центрирующее модальное окно / div на ipad - PullRequest
Новая
       9

вертикально центрирующее модальное окно / div на ipad

1 голос
/ 31 декабря 2011

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

Я подумал, что-то вроде этого можетhelp: 

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    if (navigator.userAgent.match(/iPad/i)) {
    winH = winH + $(window).scrollTop();
    } 

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

Но это не работает, потому что он по-прежнему неправильно позиционирует div, т.е.нет в окне просмотра.

Любые предложения очень ценятся!

Ответы [ 2 ]

2 голосов
/ 31 декабря 2011

Итак, проблема в неприязни iPad к позиции: исправлено. Вот как я обошел это: 

if (navigator.userAgent.match(/iPad/i)) {
var positionY = window.pageYOffset;
boxH = 690 - 400; 
// 690 is Safari's usable area on ipad landscape
// 400 is height of div
positionM = positionY + boxH;
//Set the popup window to center
$(id).css('top', positionM);
}

Очевидно, что он не центрирует div на портретном iPad, но, честно говоря, это достаточно хорошо!

2 голосов
/ 31 декабря 2011

Вот скрипка , которая доставит вас туда, где вы должны быть.(Обратите внимание на положение: исправлено в CSS).По сути, все, что вам нужно сделать, это дать вашему модалу фиксированную позицию, верхнее поле 50%, левое поле 50%, а затем сместить верх / лево на 50% от вашей высоты / ширины мод соответственно.

Это будетконечно, сломаться в более ранних версиях IE (проблемы с атрибутом 'fixed') ... но опять же, ваш обычный пользователь iPad, вероятно, не катится IE6 , в любом случае. 

.sample{
       position   :  fixed;
       top        :  50%;
       left       :  50%;
       height     :  100px;
       width      :  100px;           
       margin-left:  -50px;
       margin-top :  -50px;
       border     :  1px solid #000
}

<div class="sample">Sample</div>
...