Twitter Bootstrap 模态背景不会覆盖 iPad 上的整个屏幕

Posted 2023-02-22

【中文标题】Twitter Bootstrap 模态背景不会覆盖 iPad 上的整个屏幕

【英文标题】：Twitter Bootstrap modal backdrop doesn't cover entire screen on iPad

【发布时间】：2012-06-21 12:23:25

【问题描述】：

我正在使用 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- 属性打开模式，它可以正常工作。该问题仅在通过脚本打开模式时显示。

【问题讨论】：

你能在 jsFiddle 中创建一个工作示例吗jsfiddle.net/baptme/KFgrz

【参考方案1】：

原来我对这个问题的研究太深了。打开模式的链接需要有一个 href="#myModal" 以将屏幕设置为模式。我只有一个 href="#" 这显然是因为它正在滚动到页面顶部（并且模式位于滚动位置。

走错路

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