javascript - Bootstrap 模态在面板点击时移动到顶部

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");
});

第一个bind控制modal隐藏时的事件并启用全页滚动，第二个bind控制modal显示时的事件并禁用全页滚动。

简单。 :)