Twitter Bootstrap fenêtre modale scintille

Question

Je veux insérer quelque chose à l'intérieur de la fenêtre modale en utilisant Ajax, alors j'ai essayé d'ouvrir manuellement la fenêtre modale. Le code ressemble à ceci

$(function(){ 
     $('#modal-from-dom').modal({ 
      backdrop: true, 
      keyboard: true 
     }); 
     $('#modalbutton').click(function(){ 

      $('#my-modal').bind('show', function() { 
       // do sth with the modal 
      }); 
      $('#modal-from-dom').modal('toggle'); 

      return false; 
     }); 
    }); 

Le code HTML est copié directement à partir de la page de bootstrap

<div id="modal-from-dom" class="modal hide fade"> 
    <div class="modal-header"> 
     <a href="#" class="close">×</a> 
     <h3>Modal Heading</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn primary">Primary</a> 
     <a href="#" class="btn secondary">Secondary</a> 
    </div> 
</div> 
<button id="modalbutton" class="btn">Launch Modal</button> 

Le problème est en cliquant sur le bouton la première fois semble fonctionner très bien, après la seconde cliquez sur le modal fenêtre montre pendant 1 seconde ou plus, puis disparaît. Si je change de 'toggle' en 'show', après le second clic, la toile de fond ne disparaîtra pas complètement. Comment puis-je déboguer cela?

Answer 1

La façon dont vous effectuez actuellement des actions est probablement la cause du scintillement. Essentiellement, ce que vous dites au navigateur est: mettre à jour le contenu après que le div a été montré. Vous demandez également à jQuery de lier l'événement onShow CHAQUE fois que le lien est cliqué. Cette déclaration de liaison doit être faite en dehors de l'événement onClick. Ce que vous devriez essayer, c'est de changer votre contenu modal AVANT de l'afficher, permettant au navigateur d'ajuster le DOM de manière appropriée avant de l'afficher, réduisant (sinon éliminant) le scintillement.

Essayez quelque chose de plus comme ceci:

$(function(){ 
    $('#modal-from-dom').modal({ 
     backdrop: true, 
     keyboard: true 
    }); 
    $('#modalbutton').click(function(){ 

     // do what you need to with the modal content here 

     // then show it after the changes have been made 

     $('#modal-from-dom').modal('toggle'); 
     return false; 
    }); 
});