Ventana flotante modal Twitter Bootstrap

Question

Quiero insertar algo dentro de la ventana modal usando Ajax, así que traté de abrir manualmente la ventana modal. El código es el siguiente

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

el HTML se copia directamente de arranque js página

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

Así que el problema es hacer clic en el botón de la primera vez parece funcionar muy bien, después del segundo clic en el modal la ventana se muestra durante 1 segundo más o menos y luego desaparece. Si cambio 'alternar' a 'mostrar', después del segundo clic, el fondo no desaparecerá por completo. ¿Cómo puedo depurar esto?

Answer 1

Es probable que la causa del parpadeo sea la forma en que realiza las acciones. Básicamente, lo que le está diciendo al navegador es: actualice el contenido después de que se haya mostrado el div. También le está diciendo a jQuery que vincule el evento onShow CADA vez que se hace clic en el enlace. Esa declaración de enlace debe realizarse fuera del evento onClick.

Lo que debe intentar, es cambiar su contenido modal ANTES de mostrarlo, permitiendo que el navegador ajuste el DOM adecuadamente antes de mostrarlo, reduciendo (si no eliminando) el parpadeo.

probar algo de la misma familia:

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