Как центрировать spin.js spinner в bootstrap 3 модальных?

Я пытаюсь отобразить и центрировать спиннер spin.js в модуле Bootstrap 3. Используя приведенный ниже код, я получил его для работы в IE и FF, но НЕ в Chrome, Safari Desktop, Chrome IOS, Safari IOS.Как центрировать spin.js spinner в bootstrap 3 модальных?

Проблема, похоже, связана с выгоранием в анимации (серый набросок заднего плана), потому что, когда я устанавливаю модальный класс только в «модальное шоу», он работает, но, конечно, не будет исчезать в анимации. См. Это jsfiddle. Это когда я использую «$ ('# Search_Modal»). Modal (' show '); "что он не работает в некоторых браузерах, описанных выше.

Запустите этот jsfiddle как на хроме, так и на firefox, и вы увидите что я имею в виду. кто-нибудь знает, как это исправить или сделать это правильно? Я хочу бутстраповское модальный фейдера к работе.

Я использую 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);

источник

2013-09-13 fat fantasma

Попробуйте заменить div.modal-тело

<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/

источник

2013-09-13 22:55:53 userfb

Как центрировать spin.js spinner в bootstrap 3 модальных?

ответ

Смежные вопросы