Powerful folk Twitter Bootstrap does not cover the entire screen on the iPad

Question

I use the modal component in the Bootstrap Twitter package. This modal is opened with the click of a button, and its contents are loaded dynamically using an Ajax call. All of the above works fine on PC (FF, Chrome), as well as on iPad (Safari). However, on an iPad, if the screen scrolls a bit before the button is pressed, then the background for the modal screen will cover only part of the screen (depending on how much the screen scrolls). The background image goes to the correct position (covering the entire screen behind the modal), if the page scrolls at all.

Thank any help with this, as it looks pretty ugly, while the background partially covers the screen.

It is not affected by:

• class "fade"
• Positioning modal code inside the DOM.
• Manually scrolling a page using Javascript

Below I will include some code with deletion (internal controls and those removed for brevity).

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> 

Function to open modality:

 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 internal sections of the modal file.

Link calling function:

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

An example on the Twitter Bootstrap page, so I wonder what can I do differently?

EDIT: Additional note: if a modal is opened using data attributes, it works fine. The problem only occurs when opening the modal with a script.

Answer 1

Turns out I was looking too much for this problem. A link that opens a modal value must have href = "# myModal" in order to set the screen to modal. I had only href = "#", which, apparently, reset the Twitter Bootstrap mod because it was scrolling to the top of the page (and the mod was located in a scrollable place.

Wrong Way

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

The right way

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

As an alternative

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

Thanks, @baptme, because switching to jsFiddle made me understand why the page was scrolling.