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

前端之家收集整理的这篇文章主要介绍了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.

  1. <div id="Searching_Modal" class="modal fade" tabindex="-1" role="dialog" data-keyboard="false"
  2. data-backdrop="static">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header" style="text-align: center">
  6. <h3>Searching for Seats</h3>
  7. </div>
  8. <div class="modal-body">
  9. <br>
  10. <br>
  11. <br>
  12.  
  13. <div id="searching_spinner_center" style="position:fixed; left:50%"></div>
  14. <br>
  15. <br>
  16. <br>
  17. </div>
  18. <div class="modal-footer" style="text-align: center"></div>
  19. </div>
  20. </div>

这是spin.js设置代码

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

解决方法

尝试用div.modal-body替换
  1. <div class="modal-body" >
  2. <div style="height:200px">
  3. <span id="searching_spinner_center" style="position: absolute;display: block;top: 50%;left: 50%;"></span>
  4. </div>
  5. </div>

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

猜你在找的HTML相关文章