html - ¿Cómo centrar spin.js spinner en bootstrap 3 modal?

twitter-bootstrap modal-dialog

Question

Estoy tratando de mostrar y centrar el spinner spin.js en un modo Bootstrap 3. Usando el código de abajo, lo tengo para trabajar en IE y FF pero NO en Chrome, Safari Desktop, Chrome IOS, Safari IOS.

El problema parece estar relacionado con el desvanecimiento en la animación (superposición de fondo gris) porque cuando configuro la clase modal como "modo modal", funciona, pero sin desvanecimiento en la animación, por supuesto. Ver este jsfiddle . Es cuando uso "$ (''# Searching_Modal"). Modal ('' show ''); "que no funciona en algunos de los navegadores descritos anteriormente.

Ejecuta este jsfiddle tanto en chrome como en firefox y verás lo que quiero decir. ¿Alguien sabe cómo solucionar esto o lo hace correctamente? Quiero que el bootstrap se desvanezca para funcionar.

Estoy usando Bootstrap 3 y 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>

Aquí está el código de configuración de 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);

Answer 1

Intenta reemplazar div.modal-body por

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

Trabaja para mi. http://jsfiddle.net/D6rD6/5/