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