模态与 bootstrap4 alpha6 模态转换错误答案

【问题标题】：Modal is transitioning error with bootstrap4 alpha6 modal模态与 bootstrap4 alpha6 模态转换错误
【发布时间】：2017-09-02 03:53:14
【问题描述】：

我正在使用 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

有什么建议吗？

【问题讨论】：

这是一个错误github.com/twbs/bootstrap/issues/22334

标签： javascript jquery modal-dialog bootstrap-4

【解决方案1】：

我也在使用 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);
    });

【讨论】：

你能解释一下你的代码是做什么的吗？谢谢。

【解决方案2】：

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

更改执行函数的顺序可能会起作用：

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

最后，当您访问模态框内的 HTML 时，请确保模态框在屏幕上是打开/可见的。

【讨论】：

与更改模态框内的DOM元素无关，即使您不更改任何内容并尝试在模态框已经打开的情况下多次打开它，也会发生错误

【解决方案3】：

最快的解决方案是删除引发此错误的模态“fade”类。这似乎是 Bootsrap v6 的一个已知问题，将在下一个版本中修复。

见here

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

与从父 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');
       }
});

【讨论】：

【解决方案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');
})

【讨论】：