Twitter启动模式背景不固定

Question

我有一个搜索叫喊地点的模式。一旦我做了一个叫喊搜索的地方，原来的模型的高度是扩展的，并填充返回的数据。但是，当我滚动时，背景并不是固定的。

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

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

祝好运!