4

我正在使用 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 页面上给出的示例有效，所以我想知道我可能会做些什么不同的事情？

编辑：附加说明，如果使用 data- 属性打开模式，它可以正常工作。该问题仅在通过脚本打开模式时显示。

4

1 回答 1

4

原来我在寻找问题的深度太深了。打开模式的链接需要有一个 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 让我意识到页面滚动的原因。

于 2012-06-20T06:40:55.760 回答