如何使用Bootstrap实现从一个模态到另一个模式的导航？

Question

我在页面上有几个元素。

当您点击其中一个时，会出现一个模态。

我希望可以从一个bootstrap模式导航到另一个模式。

如何使用Bootstrap实现此行为？

Answer 1

这对您有用：

HTML代码

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-next">
  Next
</button>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-back">
 Back
</button>

<div class="modal fade" id="modal-next" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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" id="myModalLabel">Page1</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="next-trigger">Next</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-back" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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" id="myModalLabel">Page2</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="back-trigger">Back</button>
      </div>
    </div>
  </div>
</div>

JS代码

$("#next-trigger").click(function(){
  $('#modal-next').modal('hide');
  $('#modal-back').modal('show');
});


$("#back-trigger").click(function(){
  $('#modal-back').modal('hide');
  $('#modal-next').modal('show');
})

Check it out.