css - Twitter Bootstrap 模态背景不固定

Question

我有一个 yelp 地点搜索模式。一旦我用 yelp 搜索地点，原始模型的高度就会扩展并填充返回的数据。但是，当我滚动时，背景不会保持固定。

我注意到 bootstrap 在模态背景中添加了一个样式高度属性，并且不会调整大小，除非刷新页面或者当我在 chrome 中打开控制台然后关闭它时。

<div class="modal-backdrop fade in" style="height: 1344px;"></div>

这是我目前使用的 html 代码:

 <div class="page-container">
 <div class="modal fade" id="yelpModal" tabindex="-1" role="dialog" aria-labelledby="yelpModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content" style="background-color: #fafafa">
        <div class="modal-header text-center">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="yelpModalLabel">Add a Business</h4>
        </div>
        <div class="modal-body text-center">
            <script src="../static/js/jquery-1.11.2.min.js"></script>
            <script src="../static/js/ajax.js"></script>

            <h3>Add a place from Yelp</h3>
            <div class="btn-group">
                <!--Change value of yelpIsLocation to determine type of search-->
                <button type="button" id="yelpIsNear" class="active btn btn-default" name="inputAddress" value="yes" onclick="document.getElementById('yelpIsLocation').value='no';returnUserPosition();">Search near you</button>
                <button type="button" id="yelpIsLocation" class="btn btn-default" name="inputAddress" value="no" onclick="this.value='yes';enableLocationSearch();">Search for address</button><br>
            </div>

            <div id="userCoord" style="display:block;">
                <p><small id="placeholderWhileGettingLocation"></small></p>
                <p><span id="userLat" style="display:none;"></span>
                <span id="userLong" style="display:none;"></span></p>
            </div>

            <form id="ajaxForm">
                {% csrf_token %}
                <!--User provided location-->
                <div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
                    <input type="text" class="form-control" placeholder="E.g. 200 California St" id="ajaxLocation"><br>
                    <input type="text" class="form-control" placeholder="E.g. dinner" id="ajaxTerm">
                </div>
                <!--Coordinates stay hidden-->
                <input id="yelpGeoCoordLat" type="text" style="display:inline-block;visibility:hidden;">
                <input id="yelpGeoCoordLong" type="text" style="display:inline-block;visibility:hidden;">
            </form>
            <br>
            <div class="col-lg-12">
                <button type="button" class="btn btn-danger" onclick="yelp_ajax();">Search on Yelp!</button>&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#addPlaceModal">Add Manually</button>
            </div>
            <p></p>
            <br>
            <br>
            <div id="yelpOutput"></div>

            <script src="../static/js/yelp_search.js"></script>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#newModal">Done</button>

        </div>
    </div>
</div>

Answer 1

我认为在这个链接中也是同样的问题(bootstrap modal issue in chrome)

我今天找到了，所以这是我的答案。

我复制粘贴在下面...

---

我遇到了同样的问题。我找到了解决方案，但我不知道它是如何工作的。解决方案是，添加一些我在下面编写的 jquery 代码。

$('.modal').bind('shown.bs.modal', function () {
  $(".modal").css("overflow-y", "scroll");
});
$('.modal').bind('hide.bs.modal', function () {
  $(".modal").css("overflow-y", "auto");
});

祝你好运!