Twitter Bootstrapモーダルウィンドウがちらつく

Question

私はAjaxを使ってモーダルウィンドウ内に何かを挿入したいので、モーダルウィンドウを手動で開こうとしました。コードは、HTMLを直接ブートストラップjsのページ

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

からコピーされたこの

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

のように見えるので、問題は、モーダルをクリック秒後、最初の時間だけで正常に動作するようです]ボタンをクリックしていますウィンドウが1秒間表示されて消えます。 '表示'に切り替えると、2回目のクリック後に背景が完全にフェードアウトしません。これをどのようにデバッグできますか？

Answer 1

あなたが現在アクションを実行している方法は、おそらくちらつきの原因です。基本的に、ブラウザに何を伝えているかは、divが表示された後にコンテンツを更新することです。また、jQueryにリンクがクリックされるたびにonShowイベントをバインドするように指示しています。そのバインド宣言は、onClickイベントの外で行う必要があります。

あなたが試してみるべきことは、表示する前にモーダルコンテンツを変更し、表示する前にブラウザがDOMを適切に調整して、フリッカーを減らしていなければ減らしてください。

より、このような何かを試してみてください：

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