Twitter Bootstrap modal pencerede titreme

Question

Ajax kullanarak modal pencerenin içine bir şey eklemek istiyorum, bu nedenle modal pencereyi manuel olarak açmaya çalıştım. Kod HTML düz Bootstrap js sayfa

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

kopyalanan bu

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

benziyor Yani sorun kalıcı tıklayın saniye sonra, ilk kez sadece iyi iş gibi görünüyor düğmesini tıklayarak edilir Pencerede 1 saniye ya da daha sonra gösterilir ve sonra kaybolur. 'Geçiş yap' seçeneğini 'göster' olarak değiştirirseniz, ikinci tıklamadan sonra arka plan tamamen sönmez. Bunu nasıl ayıklayabilirim?

Answer 1

Halihazırda işlem gerçekleştirme şekliniz, muhtemelen titremenin nedeni olabilir. Esasen, tarayıcıya söylediğiniz şey: div gösterildikten sonra içeriği güncelleyin. Ayrıca jQuery'ye onShow olayını her zaman bağlantıya tıklattığını söylüyorsunuz. Bu bağlama bildirimi, onClick olayının dışında yapılmalıdır.

Denemeye çalışmanız gereken şey, modal içeriğinizi görüntülemeden ÖNCE, tarayıcının görüntülemeden önce DOM'yi uygun şekilde ayarlamasına izin vererek, titreşimi azaltarak (ortadan kaldırmazsa) düşürmektir.

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