Twitter Загрузочный модальный фон не охватывает весь экран на iPad

Question

Я использую модальный компонент в пакете Bootstrap Twitter. Этот модаль открывается с помощью нажатия кнопки, и его содержимое загружается динамически с помощью вызова Ajax. Все вышеизложенное прекрасно работает на ПК (FF, Chrome), а также на iPad (Safari). Тем не менее, на iPad, если экран немного прокручивается до нажатия кнопки, то фон для модального экрана будет охватывать только часть экрана (в зависимости от того, сколько прокручивается экран). Фоновое изображение переходит в правильное положение (охватывающее весь экран позади модального), если страница прокручивается вообще.

Поблагодарите любую помощь с этим, поскольку она выглядит довольно уродливой, при этом лишь частично покрывая экран.

Вещи, которые сделать не влияют на него:

• «замирания» класса
• позиционирование кода модальной внутри DOM.
• вручную прокручивая страницу с помощью Javascript

Ниже я буду включать некоторый раздел из кода (внутренний контроль и такой удален для краткости).

Модальное:

<div id="tehtavaModal" class="modal hide fade"> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal" href="#">&times;</a> 
     <h3 id="tehtavaModalOtsikko"></h3> 
    </div> 
    <div class="modal-body"> 
     <div id="tehtavaModalSisalto"></div> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal">Sulje</a> 
     <a href="#" class="btn btn-primary" data-dismiss="modal">Tallenna Vastaukset</a> 
    </div> 
</div> 

Функция, чтобы открыть модальное:

function haeTehtava(tehtavaID) { 
    $('#tehtavaModalOtsikko').html('Tehtävä'); 
    $('#tehtavaModalSisalto').html('<p>Tehtävää haetaan...</p>'); 
    $('#tehtavaModalKysymykset').html(''); 
    $('#myCarousel').hide(); 

    $.getJSON("Sivu/HaeTapahtuma", { 'tyyppi': 4, 'ID': tehtavaID }, naytaTehtava) 
     .error(function() { $('#tehtavaModalSisalto').html('<div class="alert alert-error">Tehtävän haussa tapahtui virhe.</div>'); }); 
    $('#tehtavaModal').modal(); 
} 

Функция обратного вызова (naytaTehtava) просто заполнит некоторые из внутренних разделов модальной.

Ссылка, которая вызывает функцию:

<a href="#" onClick="haeTehtava(1);">Open Modal</a> 

Пример, приведенный на странице работах Twitter Bootstrap, поэтому мне интересно, что я мог бы делать по-другому?

EDIT: Дополнительное примечание: если модальная функция открыта с использованием атрибутов данных, она отлично работает. Проблема возникает только при открытии модального скрипта.

Answer 1

Оказывается, я искал слишком много проблем. Ссылка, которая открывает модальное значение, должна иметь href = "# myModal", чтобы установить экран в модальный. У меня был только HREF = «#», который, видимо, сбросила модальный Twitter Bootstrap, потому что он был прокруткой в ​​верхней части страницы (и модальный располагался на прокручивать месте.

Неправильный путь

<a href="#" onClick="$('#myModal').modal();">Open Modal</a> 

Правильный способ

<a href="#myModal" onClick="$('#myModal').modal();">Open Modal</a> 

Альтернативно

<a href="" onClick="$('#myModal').modal(); return false;">Open Modal</a> 

Спасибо идет к @baptme потому что переход к jsFiddle заставил меня понять, почему страница прокручивалась.