Twitter Bootstrap模式窗口闪烁

Question

我想使用Ajax在模式窗口中插入内容，所以我尝试手动打开模式窗口。代码如下所示

$(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秒左右，然后消失。如果我将“切换”更改为“显示”，在第二次点击之后，背景将不会完全淡出。我怎样才能调试呢？

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