Question

我正在尝试创建一个包含两个页面的表单＆＃39;使用bootstrap模式，当用户点击＆＃34; next＆＃34;它假设隐藏模态，加载新内容并再次显示它。但是当我用.modal关闭模态时（＆＃34;隐藏＆＃34;），它不会关闭模态，但也会显示另一个模态并使屏幕更暗。
当我点击bootstrap给我们的关闭按钮时，它显示两个模态，一秒钟后隐藏它们，第二次我点击打开模态我有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

bootstrap模态事件控制

1 个答案: