Twitter Bootstrap模式窗口閃爍

我想使用Ajax在模式窗口中插入內容，所以我嘗試手動打開模式窗口。代碼如下所示Twitter Bootstrap模式窗口閃爍

$(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被直接從引導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>

複製所以問題是點擊在第一時間似乎工作就好了按鈕，之後的第二點擊模式窗口顯示1秒左右，然後消失。如果我將「切換」更改爲「顯示」，在第二次點擊之後，背景將不會完全淡出。我怎樣才能調試呢？

來源

2011-10-23 shenyl

是'.modal（）'一個某種形式的插件？什麼是'＃我的模態'，你在做什麼？可能的問題是，您每次點擊都會綁定「show」事件，並且它會執行一些操作，將您的開關擰緊。 –

該問題已關閉。我已經更新了問題中的代碼。 – shenyl

請發佈您的解決方案。 – JSuar

您當前執行操作的方式很可能是閃爍的原因。本質上，你告訴瀏覽器是：在顯示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; 
    }); 
});

來源

2012-02-13 01:10:41

嗨，你的回答幫了我很多。問題是，當我想關閉彈出窗口時，它不會切換回來 - 但會立即消失，並且不會順利。你能幫我解決這個問題嗎？ –

Twitter Bootstrap模式窗口閃爍

回答

相關問題