我正在尝试以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>
