Question

我正在使用bootstrap4 alpha 6 Modal，我得到了：

Error: Modal is transitioning

当我尝试通过JavaScript函数再次使用动态数据重新触发相同的模式时会发生这种情况，如下所示：

function openModal(title, text) {
    $('.modal-title').text(title);
    $('.modal-body p').text(text);
    $('#modalAlert').modal('show');
}

我尝试使用setTimeout函数，但没有像本文那样工作： https://github.com/twbs/bootstrap/issues/21687

有什么建议吗？

Answer 1

最快的解决方案是删除模式＆＃39; fade＆＃39;抛出这个错误的类。这似乎是Bootsrap v6的一个已知问题，将在下一次发布时修复。

请参阅here

Answer 2

从父div类中删除fade。

最终模态代码（此处为后代添加）：

HTML

<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"  aria-hidden="true">
          <div class="modal-dialog" role="document">
              <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                    </div>
                    <div class="col-md-6">
                        <img src="ico/4.svg">
                    </div>
                </div>
              </div>
          </div>
    </div>

JS

$.ajax({
        type: "GET",
        url: "/getTimeline",
        data: {
            'dateTime': selected
        },
        async: true,
        beforeSend: function () {
              $('#applemodal').modal({
                  backdrop: 'static',
                  keyboard: false
              });
        },
        success: function(data) {
            $('#applemodal').modal('toggle');
       }
});

Answer 3

我正在使用bootstrap 4 Modal，我的解决方案;

    $(document).on('show.bs.modal', '.modal', function (event) {
        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);
    });

Answer 4

首先打开模态，然后尝试找到模态内部的DOM元素（例如$('.modal-title')和$('.modal-body p')）

更改执行功能的顺序可能有效：

function openModal(title, text) {
  $('#modalAlert').modal('show'); 
  $('.modal-title').text(title);
  $('.modal-body p').text(text);
}

最后，当您访问模式中的HTML时，请确保在屏幕中打开/显示模态。

Answer 5

请将您的按钮类型='submit'设置为type ='button'

Answer 6

我的解决方案是以编程方式而不是通过链接打开模型。

而不是：

<A href="javascript: void(0);" data-toggle="modal" data-target="#myModal" title="Open My Modal">Open My Modal</A>

使用：

<A href="javascript: void(0);" ID="myLink" title="Open My Modal">Open My Modal</A>

$('#myLink').on('click', function(){ 
    $('#myModal').modal('show');
})

Modal正在使用bootstrap4 alpha6模式转换错误

6 个答案: