Question

我在bootstrap中有两个模态窗口，一个较小，另一个较长，都有重要数据，当我关闭第一个第二个打开时，问题是当我打开较长的窗口时，它看起来不完整，并且当长窗口首次显示完好时。

代码：

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">   
    </head>
    <body>
        Hola Mundo

        <div class="modal fade" id="modal1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                <p>One fine body&hellip;</p>
              </div>
              <div class="modal-footer">
                <button id="continue">Continue</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal fade" id="modal2">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                <textarea rows="40"></textarea>    
              </div>
              <div class="modal-footer">
                End
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <button id="test">Not work</button>
        <button id="test2">Work</button>

        <script src="https://code.jquery.com/jquery-2.1.4.min.js"
              integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw="
              crossorigin="anonymous"></script>  
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <script>
        $(document).on('click', '#test', function(e){
            $('#modal1').modal('show');
        });

        $(document).on('click', '#test2', function(e){
            $('#modal2').modal('show');
        });

        $(document).on('click', '#continue', function(e){
            $('#modal1').modal('hide');
            $('#modal2').modal('show');
        });        
        </script>                         
    </body>    
</html>

示例：https://jsfiddle.net/onkdfjpk/3/

我该如何解决这个问题？

Answer 1

问题是当第一个没有完全关闭时，你正在打开一个新的模态。你应该等待隐藏第一个：

 $('#modal1').on('hidden.bs.modal', function() {
    $('#modal2').modal('show');
 });

working example

Answer 2

将overflow-y: auto;添加到#modal2，它会像您期望的那样工作。

＆＃13;

$(document).on('click', '#test', function(e) {
  $('#modal1').modal('show');
});

$(document).on('click', '#test2', function(e) {
  $('#modal2').modal('show');
});

$(document).on('click', '#continue', function(e) {
  $('#modal2').modal('show');
  $('#modal1').modal('hide');
});

＆＃13;

#modal2 {
  overflow-y: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Hola Mundo
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div>
        <div class="modal-header">
          Header
        </div>
        <div class="modal-footer">
          <button id="continue">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div>
        <div class="modal-header">
          <textarea rows="40"></textarea>
        </div>
        <div class="modal-footer">
          Footer
        </div>
      </div>
    </div>
  </div>
</div>

<button id="test">Not work</button>
<button id="test2">Work</button>

＆＃13;

模板在引导程序中未显示完整

2 个答案: