Twitter Bootstrap cửa sổ kiểu hiển thị flickers

Question

Tôi muốn chèn một cái gì đó bên trong cửa sổ phương thức bằng cách sử dụng Ajax, vì vậy tôi đã cố mở thủ công cửa sổ phương thức. Mã này trông như thế này

$(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 được sao chép trực tiếp từ bootstrap js trang

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

Vì vậy, vấn đề là cách nhấn vào nút lần đầu tiên dường như chỉ làm việc tốt, sau khi thứ hai nhấp vào modal cửa sổ hiển thị trong 1 giây hoặc lâu hơn và sau đó biến mất. Nếu tôi thay đổi 'toggle' thành 'show', sau lần nhấp thứ hai, phông nền sẽ không phai mờ hoàn toàn. Làm thế nào tôi có thể gỡ lỗi này?

Answer 1

Cách bạn hiện đang thực hiện hành động có thể là nguyên nhân gây nhấp nháy. Về cơ bản, những gì bạn đang nói với trình duyệt là: cập nhật nội dung sau khi div được hiển thị. Bạn cũng đang nói với jQuery để ràng buộc sự kiện onShow MỌI thời gian liên kết được nhấp. Tuyên bố ràng buộc đó phải được thực hiện bên ngoài sự kiện onClick.

Những gì bạn nên thử, là thay đổi nội dung phương thức của bạn TRƯỚC KHI hiển thị nó, cho phép trình duyệt điều chỉnh DOM một cách thích hợp trước khi hiển thị nó, giảm (nếu không loại bỏ) nhấp nháy.

Hãy thử một cái gì đó như thế này:

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