Safari中

Question

我正在以编程方式触发Bootstrap模式（而不是使用data-toggle =“modal”触发）并且它不会在Safari中显示。请注意，我已经查看了有关SO的其他问题，但他们关注的是数据属性调用。

我基本上有一个链接到外部页面的链接。这个外部页面需要一些时间来加载，所以我创建了一个模式用作活动指示器。

请注意，setTimeout函数只是为了延迟向外部页面的转换，因为我无法链接到实际页面。

问题

单击Safari中的“Click to Fire Modal”链接时，模式不会显示。它确实在其他现代浏览器中显示。

HTML

<!-- Loader Modal -->
<div class="modal fade" id="loader-modal" data-keyboard="false" data-backdrop="static"  tabindex="-1" role="dialog" aria-labelledby="loaderlabel">
  <div class="vertical-alignment-helper">
    <div class="modal-dialog modal-sm vertical-align-center">
      <div class="modal-content">
        <div class="modal-header custom">
          <div class="modal-body">
            <div class="loadingSpinner"><div class="spinner-wave"><div></div><div></div><div></div><div></div><div></div></div><span class="text-center"><b>Loading Pallet...</b></span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /Loader Modal -->

<ul class="list-group">
  <li class="list-group-item">
    <a href="#" class="btn-openOrd">
        <h4 class="pghead">Click to Fire Modal</h4>
    </a>
  </li>
</ul>

CSS

.loadingSpinner, .loadingSpinnerKit {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}
p.loadingSpinner.big {
    font-size: 18px;
    text-align: center;
}
.spinner-wave {
    margin: 0 auto 5px;
    width: 90px;
    height: 30px;
    text-align: center;
}
.spinner-wave-med {
    margin: 0 auto 5px;
    width: 110px;
    height: 40px;
    text-align: center;
}
.spinner-wave-big {
    margin: 0 auto 5px;
    width: 130px;
    height: 50px;
    text-align: center;
}
.spinner-wave-med>div, .spinner-wave>div {
    background-color: #E11937;
    height: 100%;
    width: 8px;
    margin-right: 8px;
    display: inline-block;
    -webkit-animation: wave 1.2s infinite ease-in-out;
    animation: wave 1.2s infinite ease-in-out;
}
.spinner-wave-big>div {
    background-color: #E11937;
    height: 100%;
    width: 12px;
    margin-right: 10px;
    display: inline-block;
    -webkit-animation: wave 1.2s infinite ease-in-out;
    animation: wave 1.2s infinite ease-in-out;
}
.spinner-wave div:nth-child(2), .spinner-wave-med div:nth-child(2), .spinner-wave-big div:nth-child(2) {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.spinner-wave div:nth-child(3), .spinner-wave-med div:nth-child(3), .spinner-wave-big div:nth-child(3) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.spinner-wave div:nth-child(4), .spinner-wave-med div:nth-child(4), .spinner-wave-big div:nth-child(4) {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s;
}
.spinner-wave div:nth-child(5), .spinner-wave-med div:nth-child(5), .spinner-wave-big div:nth-child(5) {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s;
    margin-right: 0;
}
@-webkit-keyframes wave {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1.0);
    }
}
@keyframes wave {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

JQUERY

$(function() {
    $('.btn-openOrd').on('click', function() {
        var loaderModal = $('#loader-modal');
        loaderModal.find('.modal-body').html('<div class="loadingSpinner"><div class="spinner-wave"><div></div><div></div><div></div><div></div><div></div></div><span class="text-center"><b>Loading Orders & Quotes...</b></span></div>');
        loaderModal.modal('show');
    });
    setTimeout(function() {
            window.location.href = 'https://jquery.com/';
        }, 8000);
});

我创造了一个小提琴，看看我在做什么。请注意，这适用于其他现代浏览器 - 而不是Safari。

Fiddle