html – 如何中心spin.js spinner在引导3模态？

我正在尝试以spinstrap 3模态显示和定位spin.js微调.使用下面的代码,我可以在IE和FF中工作,但不能在Chrome,Safari桌面,Chrome IOS,Safari IOS中工作.

这个问题似乎与动画中的褪色(灰色背景叠加)有关,因为当我将模态类设置为只是“模态显示”时,它的工作原理,但当然不会在动画中淡入淡出.看到这个jsfiddle.这是当我使用“$(‘#Searching_Modal”).modal(‘show’);“它在上面描述的某些浏览器中不起作用.

在chrome和firefox上运行这个jsfiddle,你会看到我的意思.有没有人知道如何解决这个问题或是做得好吗？我确实希望自举模式淡入淡出.

我使用的是Bootstrap 3和spin.js.

<div id="Searching_Modal" class="modal fade" tabindex="-1" role="dialog" data-keyboard="false"
 data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header" style="text-align: center">
            <h3>Searching for Seats</h3>
        </div>
        <div class="modal-body">
            <br>
            <br>
            <br>

            <div id="searching_spinner_center" style="position:fixed; left:50%"></div>
            <br>
            <br>
            <br>
        </div>
        <div class="modal-footer" style="text-align: center"></div>
    </div>
</div>

这是spin.js设置代码：

var opts = {
  lines: 13,// The number of lines to draw
  length: 20,// The length of each line
  width: 10,// The line thickness
  radius: 30,// The radius of the inner circle
  corners: 1,// Corner roundness (0..1)
  rotate: 0,// The rotation offset
  direction: 1,// 1: clockwise,-1: counterclockwise
  color: '#000',// #rgb or #rrggbb or array of colors
  speed: 1,// Rounds per second
  trail: 60,// Afterglow percentage
  shadow: false,// Whether to render a shadow
  hwaccel: false,// Whether to use hardware acceleration
  className: 'spinner',// The CSS class to assign to the spinner
  zIndex: 2e9,// The z-index (defaults to 2000000000)
  top: 'auto',// Top position relative to parent in px
  left:'auto' // Left position relative to parent in px
};
//var target = document.getElementById('center_spinner');
var target = document.getElementById('searching_spinner_center');
var spinner = new Spinner(opts).spin(target);

解决方法

尝试用div.modal-body替换

<div class="modal-body" >
   <div style="height:200px">
      <span id="searching_spinner_center" style="position: absolute;display: block;top: 50%;left: 50%;"></span>
    </div>
</div>

为我工作http://jsfiddle.net/D6rD6/5/

原文地址：https://www.jb51.cc/html/230861.html