web-dev-qa-db-fra.com

Comment centrer le spin.js spinner en bootstrap 3 modal?

J'essaie d'afficher et de centrer le spinner spin.js dans un modal Bootstrap 3. En utilisant le code ci-dessous, je l'ai fait fonctionner dans IE et FF mais PAS dans Chrome, Safari Desktop, Chrome IOS, Safari IOS.

Le problème semble être lié au fondu de l'animation (superposition de fond gris) car lorsque je règle la classe modale sur "modal show", cela fonctionne mais sans fondu d'animation bien sûr. Voir ceci jsfiddle . C'est lorsque j'utilise "$ ('# Searching_Modal"). Modal (' show '); "que cela ne fonctionne pas dans certains des navigateurs décrits ci-dessus.

Exécutez ceci jsfiddle sur chrome et firefox et vous verrez ce que je veux dire. Quelqu'un sait-il comment résoudre ce problème ou le faire correctement? Je veux que le fondu modal bootstrap fonctionne.

J'utilise Bootstrap 3 et 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>

Voici le code de configuration 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);
htmltwitter-bootstrapmodal-dialogspinnertwitter-bootstrap-3
16
fat fantasma

Essayez de remplacer div.modal-body par

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

Travaille pour moi. http://jsfiddle.net/D6rD6/5/

25
userfb