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

祝你好运！

Twitter Bootstrap模态背景不会保持固定

1 个答案: