jquery - 来自另一个模态形式的模态在 Bootstrap 中不起作用

Question

我试图从另一个模态形式中显示一个模态形式。但是，我显示了新的模态表单，但显示在旧模态表单的背面。如何让新的模态形式呈现在大家面前。请帮忙。提前致谢。下面是我的代码

$('#modal1').modal('show');

Answer 1

这里有一个解决方案 http://jsfiddle.net/wtj6nacd/4/

$(document).ready(function() {

  $('#openBtn').click(function() {
    $('#myModal').modal({
      show: true
    })
  });

  $(document).on({
    'show.bs.modal': function() {
      var zIndex = 1040 + (10 * $('.modal:visible').length);
      $(this).css('z-index', zIndex);
      setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
      }, 0);
    },
    'hidden.bs.modal': function() {
      if ($('.modal:visible').length > 0) {
        // restore the modal-open class to the body element, so that scrolling works
        // properly after de-stacking a modal.
        setTimeout(function() {
          $(document.body).addClass('modal-open');
        }, 0);
      }
    }
  }, '.modal');
});

/* crazy batman newspaper spinny thing */

.rotate {
  transform: rotate(180deg);
  transition: all 0.5s;
}

.rotate.in {
  transform: rotate(1800deg);
  transition: all 1.5s;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal 1</h4>

      </div>
      <div class="container"></div>
      <div class="modal-body">Content for the dialog / modal goes here.
        <br>
        <br>
        <br>
        <p>more content</p>
        <br>
        <br>
        <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>

      </div>
      <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>

      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal2">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal 2</h4>

      </div>
      <div class="container"></div>
      <div class="modal-body">Content for the dialog / modal goes here.
        <br>
        <br>
        <p>come content</p>
        <br>
        <br>
      
      </div>
      <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>

      </div>
    </div>
  </div>
</div>

希望这对您有帮助。