Question

我需要从另一个模态打开一个模态，我的问题是当模态有一个很大的高度。当我关闭第二个模态时，我松开了页面上的滚动，页面被冻结了。这是一个说明我的问题的plunker： plunkr

<!DOCTYPE html>
<html>

  <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </head>

  <body>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstsModal">
        <span class="glyphicon glyphicon-flash"></span> 1st modal
      </button>

    <div class="modal fade" id="firstsModal" tabindex="-1" role="dialog" 
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width:60%">
            <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                >&times;</button>

                    </div>
                    <div class="modal-body row" style ="  margin-left: -0px; margin-right: 0px;">
                        <div class=" col-sm-12">

                                <table class="table table-striped table-bordered">
                                    <thead>

                                        <tr>
                                            <th style="text-align:center">Catégorie</th>


                                        </tr>
                                    </thead>
                                    <tbody>
                                           <tr><td>1</td></tr>
                                           <tr><td>1</td></tr>
                                            ...
                                           <tr><td>1</td></tr>
                                           <tr><td>1</td></tr>
                                           <tr><td>1</td></tr>
                                    </tbody>
                                </table>
                                 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#secondmodal">
                                   2nd modal
                                 </button>
                        </div>
                    </div>
                    <div class="modal-footer" style="text-align:center">
                        <button type="button" class="btn btn-success" data-dismiss="modal"  >
                            <span class="glyphicon glyphicon-ok-circle"></span> Ok
                        </button>
                    </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="secondmodal" tabindex="-1" role="dialog"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width:60%">
            <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                >&times;</button>

                    </div>
                    <div class="modal-body row" style ="  margin-left: -0px; margin-right: 0px;">
                        <div class=" col-sm-12">

                                <table class="table table-striped table-bordered">
                                    <thead>

                                        <tr>
                                            <th style="text-align:center">Catégorie</th>


                                        </tr>
                                    </thead>
                                    <tbody>
                                           <tr><td>1</td></tr>
                                           <tr><td>1</td></tr>
                                           ....
                                           <tr><td>1</td></tr>
                                           <tr><td>1</td></tr>
                                           <tr><td>1</td></tr>
                                    </tbody>
                                </table>
                        </div>
                    </div>
                    <div class="modal-footer" style="text-align:center">
                        <button type="button" class="btn btn-success" data-dismiss="modal"  >
                            <span class="glyphicon glyphicon-ok-circle"></span> Ok
                        </button>
                    </div>
            </div>
        </div>
    </div>
  </body>

</html>

Answer 1

提出了同样的问题并提供了解决方法：

Bootstrap Modal Issue - Scrolling Gets Disabled

根据上述问题的答案，下面的CSS代码解决了这个问题。

#firstsModal {
    overflow-y: scroll;
}

您可以查看此演示：http://plnkr.co/edit/ZiQZniY1sz1xnhnxl20z?p=preview

Answer 2

一旦遇到相同的问题，模态屏幕冻结，页面无响应。

我尝试调试该应用程序，发现它陷入了无限循环。因此，就我而言，这是由于我在编写复杂的 for 循环时犯了错误。

希望这可能对某人有帮助！

Bootstrap有2个模态，屏幕冻结

2 个答案: