Question

I am using the modal component within the Twitter Bootstrap package. This modal opens from a button click, and its content is loaded dynamically via an Ajax call. All of the above works just fine on PC (FF, Chrome), and also on the iPad (Safari). However, on the iPad if the screen is scrolled down a bit before the button is clicked, then the backdrop for the modal will only cover part of the screen (dependent on how much the screen is scrolled down). The backdrop jumps to its correct position (covering entire screen behind the modal) if the page is scrolled at all.

Would appreciate any help with this as it looks quite ugly with the backdrop only partially covering the screen.

Things that don’t affect it:

• the “fade” class
• The positioning of the modal code within the DOM.
• Manually scrolling the page via Javascript

Below I will include some stripped out code (internal controls and such removed for brevity).

The modal:

<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>

The function to open the modal:

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();
}

The callback function (naytaTehtava) simply populates some of the internal sections of the modal.

The link which calls the function:

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

The example given on the Twitter Bootstrap page works, so I am wondering what could I possibly be doing different?

EDIT: An additional note, if the modal is opened using the data- attributes, it works fine. The problem only shows when opening the modal by script.

Answer 1

Turns out I was looking too deep for the problem. The link which opens the modal needs to have a href=”#myModal” to set the screen to the modal. I had only a href=”#” which apparently threw off the Twitter Bootstrap modal because it was scrolling to the top of the page (and the modal was located at the scrolled location.

Wrong way

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

Right way

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

Alternatively

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

Thanks goes to @baptme because going to jsFiddle made me realise why the page was scrolling.