Twitter Bootstrap模态框在iPad上不完全覆盖整个屏幕

Question

我正在使用 Twitter Bootstrap 包内的模态组件。这个模态组件通过单击按钮打开，它的内容是通过 Ajax 调用动态加载的。在 PC 上（FF、Chrome）以及 iPad 上（Safari）所有上述功能都能正常工作。然而，在 iPad 上，如果在单击按钮之前屏幕向下滚动了一点，那么模态背景只会覆盖屏幕的一部分（取决于屏幕向下滚动了多少）。如果页面滚动了任意距离，则背景会跳转到其正确的位置（覆盖整个模态背后的屏幕）。

我们将不胜感激地接受任何有关此问题的帮助，因为背景仅部分覆盖屏幕看起来相当丑陋。

以下是一些已经删减的代码（为了简洁起见删除了内部控件等）：

模态框：

<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网页中给出的示例是有效的，所以我想知道可能与我不同的地方在哪里？

编辑：另外需要注意的是，如果使用data属性打开模态窗口，则可以正常工作。仅当使用脚本打开模态窗口时才会出现问题。

- Miika L.

---

你能否在 jsFiddle 上创建一个工作示例 http://jsfiddle.net/baptme/KFgrz/？ - baptme

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让我意识到页面滚动的原因。

- Miika L.