Twitter Bootstrap modalne okno migocze

Question

Chcę wstawić coś wewnątrz okna modalnego za pomocą Ajax, więc próbowałem otworzyć okno modalne ręcznie. Kod wygląda następująco

$(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; 
     }); 
    }); 

HTML jest kopiowany prosto z Bootstrap js stronie

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

Więc problem jest kliknięcie przycisku po raz pierwszy wydaje się działać dobrze, po drugim kliknięciu modal okno pokazuje się przez około 1 sekundę, a następnie znika. Jeśli zmienię "przełącznik" na "pokaż", po drugim kliknięciu tło nie zniknie całkowicie. Jak mogę to debugować?

Answer 1

Sposób, w jaki obecnie wykonujesz czynności, jest prawdopodobnie przyczyną migotania. Zasadniczo to, co mówisz przeglądarce, to: zaktualizuj zawartość po pokazaniu div. Mówisz także jQuery, aby powiązał zdarzenie onShow KAŻDY czas kliknięcia łącza. Ta deklaracja wiązania powinna być wykonana poza zdarzeniem onClick.

Należy spróbować zmienić zawartość modalną PRZED jej wyświetleniem, aby przeglądarka odpowiednio dopasowała DOM przed wyświetleniem, redukując (jeśli nie eliminując) migotanie.

Spróbuj czegoś więcej tak:

$(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; 
    }); 
});