Bootstrap 有 2 个模式，屏幕冻结

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 个模式，屏幕冻结

Bootstrap with 2 modals, screen freezes

modal-dialog

twitter-bootstrap