Bootstrap模态事件控制

Question

我正在尝试使用Bootstrap Modal创建两个'页面'的表单，当用户单击"下一步"时，它假设隐藏模态，加载新内容并再次显示。但是，当我用.modal（" hide"）关闭模态时，它不会关闭模态，但也显示了另一个模态并使屏幕更暗。
另外，当我单击引导程序给我们的关闭按钮时，它显示了两种模式，一秒钟后将它们隐藏起来，第二次我单击以打开模态，我有3种模态！每当我单击模式中的任何按钮时，都会在页面中添加另一个模态。我能做些什么？？这是一些代码，这仍然引起该问题的最简单功能。

function additionFormValidate() {
    if ($('#form-modal').is(':visible')) {
        secondPage();
    } else {
        console.log("modal didnt open");
    }
}
function secondPage() {
    $("#form-modal").modal("hide");
}

html

<div class="modal fade" id="form-modal" onclick="openModal()" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="additionFormValidate()">Next</button>
        </div>
    </div>
</div>

有人熟悉这个吗？

Answer 1

有时您需要setTimeout()来防止JavaScript工作太快。

演示：http：//jsbin.com/remevolemi/3/edit?html，output

$('.btn1').click(function(){
      $('#modal1').find('.modal-body').text('first content');
      $('#modal1').modal('show');
    });
    $('.btn-next').click(function(){
      $("#modal1").modal('hide'); //hide modal
      setTimeout(function(){
        $("#modal1").find('.modal-body').text('second content'); //change modal content
        $('#modal1').modal('show');//show modal again
      }, 500); //wait 0.5 sec
    });

在这里为另一种情况提供了一些示例：http：//jsbin.com/edit?html，output