Question

我在Twitter Bootstrap包中使用模态组件。此模式从单击按钮打开，其内容通过Ajax调用动态加载。所有上述功能在PC（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页面上给出的示例有效，所以我想知道我可能会做些什么不同？

编辑：另外请注意，如果使用数据属性打开模态，它可以正常工作。该问题仅在通过脚本打开模态时显示。

Answer 1

事实证明我对这个问题看起来太深了。打开模态的链接需要有一个href =＆＃34; #myModal＆＃34;将屏幕设置为模态。我只有一个href =＆＃34;＃＆＃34;显然已经抛弃了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让我意识到页面滚动的原因。

Twitter Bootstrap模式背景并未涵盖iPad上的整个屏幕

1 个答案: