Question

这是我之前提出过的问题，但没有得到解决问题的答案。现在发生的事情是我在点击面板时打开模态。模态打开没有问题但是当我滚动到底部并单击一个移动到主体滚动到顶部的面板时会出现问题。

以下是带有代码的fiddle。

以下是我正在使用的面板代码：

<div class="panel">
    <div class="panel-body" onclick="loadArticle('Metrico Release Date Announced', 'http://www.ign.com/articles/2014/07/16/metrico-release-date-announced')" data-toggle="modal" data-target=".bs-example-modal-lg">
        <h4>Metrico Release Date Announced</h4>
        <div class="news-item-background-image"></div>
        <br>
        <div class="article-info">
            <p class="text-muted pull-left">
                <img src="http://s1.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/favicon.ico" width="16px" height="16px">TechCrunch-1 hour ago</p><a href="#"><p class="text-muted pull-right category">Category</p></a>
        </div>
        <div class="clearfix"></div>
        <p>Metrico will be released on August 5 in the US exclusively on PS Vita, according to an announcement on the&nbsp;PlayStation Blog. Digital Dreams also announced that Palmbomen, a Dutch synth composer who has been featured in games like GTA V worked with the studio to create the soundtrack for Metrico.</p>
    </div>
    <!--/span-->
</div>

在我的CSS中，我添加了这个：

body.modal-open {
    overflow: visible !important;
    position: fixed;
    left: 0;
    width: 100%;
}

而且我知道这就是为什么会发生这种情况的原因，因为position:fixed没有最高价值我猜它会把它移到最前面。如果不是这样，那么我该怎么做才能解决这个问题。

P.S上面的CSS修复了正在发生的额外滚动条问题。所以在回答时请记住这一点。只是小费！：）

Answer 1

所以经过一段时间，找出修复方法，这是我的解决方法（灵感来自公认的答案here）：

$('.bs-example-modal-lg').bind('hidden.bs.modal', function () {
    $("html").css("overflow", "visible");
});
$('.bs-example-modal-lg').bind('show.bs.modal', function () {
    $("html").css("overflow", "hidden");
});

第一个绑定会在隐藏时调整模态事件并启用整页滚动，而第二个绑定会在显示时调整事件并禁用整页滚动。

简单。：）

Bootstrap模式在面板单击时移动到顶部

1 个答案: