带有 2 个模态的 Bootstrap，屏幕冻结

Question

带有 2 个模态的 Bootstrap，屏幕冻结

use*_*928 5 modal-dialog twitter-bootstrap

我需要从另一个模态打开一个模态，我的问题是当模态的高度很大时。当我关闭第二个模式时，我松开了页面上的滚动条并且页面被冻结了。这是一个 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Aru*_*mar 3

有人提出了同样的问题并提供了解决方案：

Bootstrap 模态问题 - 滚动被禁用

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

#firstsModal {
    overflow-y: scroll;
}

Run Code Online (Sandbox Code Playgroud)

你能看一下这个演示吗：http://plnkr.co/edit/ZiQZniY1sz1xnhnxl20z ?p=preview

归档时间：	10 年，8 月前
查看次数：	3919 次
最近记录：	5 年，1 月前