I need to open a modal from another modal, my problem is that when the modals have a big height.
When I close the second modal, I loose the scroll on my page and the page is freezed.
Here is a plunker to illustrate my problem:
[plunkr](http://plnkr.co/edit/dZ97DljF87oGt4UxtLQA?p=preview)

```
<!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>

```