¿Alguien puede decirme acerca de una biblioteca de cuadro de diálogo modal de jQuery que no succiona

Question

Los cuadros de diálogo modales basados ​​en jQuery son geniales siempre que haga todo lo que el ejemplo le indique. Necesito una biblioteca basada en jQuery diálogo modal caja que tiene que tener las siguientes características: aplicación

ideal:

function showDialog(values) 
    { 
     processToChangeDom(values); 
     changeDivTobeDisplayed(); 
     modalDialog.show(); 
    } 

• Debe ser rápido, algo así como el diálogo Agregar enlace y en StackOverflow. La mayoría de las bibliotecas tardan una eternidad en cargar el diálogo con sus efectos sofisticados y demás.

• Quiero llamarlo usando un script. Muestra un div oculto o un elemento span en línea. La mayoría de las bibliotecas hablan rellenando un ancla con rel, class y href = # hiddenDiv tipo de cosas. Necesito poder hacer lo que quiero sin agregar atributos innecesarios a mi ancla. Algo como esto

• Debe reflejar los cambios que realizo en el DOM en la div oculta. Usé Facebox y descubrí que hace una copia del div oculto y los cambios al DOM no se reflejan en la ventana modal.

• Necesito ser capaz de llamar al cierre modal div usando javascript y también adjuntar before Open y afterClose manejadores a la acción.

¿Alguien tiene alguna sugerencia? Ya he probado facebox, simplemodal y toda una gama de bibliotecas, la mayoría de ellas no admiten una u otra de las funciones que describí anteriormente.

Answer 1

Probar SimpleModal. Descubrí que es API bastante agradable.

Answer 2

¿Has consultado la interfaz de usuario jQuery? http://jqueryui.com/demos/dialog/

Answer 3

El diálogo de la interfaz de usuario de jQuery hace prácticamente todo lo que está preguntando. Además, no me he dado cuenta de que lleva mucho tiempo mostrarlo. Ni siquiera necesita tener el elemento DOM existente para usarlo. Una cosa buena de los widgets de la interfaz de usuario es que solo necesita cargar los componentes que necesita más el núcleo. También están ampliamente disponibles a través de redes CDN, por lo que es posible que el cliente del usuario ya haya descargado el JS.

$(function() { 
     $('<div title="I am a dialog"><p>Put whatever you want in here</p></div>') 
      .dialog({ 
       autoOpen: true, 
       modal: true, 
       open: function(event,ui) { ... }, 
       close: function(event,ui) { 
         ... 
         $(this).dialog('destroy'); 
         } 
       draggable: false, 
       resizable: false, 
       ... 
      }) 
    }); 

Answer 4

He mirado en un buen número de cajas modales mí mismo, y el mejor que se me ocurrió es ThickBox. La caja de la interfaz de usuario de jquery también estaba bien, pero no me gustó la forma en que maneja el botón Atrás.

Thickbox cubre los puntos 1-3 en su lista de requisitos. Los controladores pares podrían agregarse fácilmente ya que el código fuente no es demasiado complicado.

Answer 5

Probar BlockUI. He encontrado que es bastante bueno.

Answer 6

jquery-ui dialog que he encontrado para ser ligero y dinámico aquí un exmple de cómo se puede usar en un Funciton

function display_alert(message,title) { 
    title = title || "Alert"; 
     $('#alert').text(message); // the message that will display in the dialog 

     $("#alert").dialog({ 
      autoOpen: false, 
      bgiframe: true, 
      modal: true, 
     title:title, 
     open: function() { 
     }, 
     close: function(){ 
      $(document).unbind('keypress'); 
     }, 
      buttons: { 
       OK: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    $('#alert').dialog('option', 'title', title); 
     $("#alert").dialog('open'); 
    } 

Answer 7

ThickBox funciona bastante bien, sobre todo si quieres hacer cosas como vídeos o Flash dentro de tus modales.

Answer 8

Si está utilizando el marco de Bootstrap de Twitter, entonces debería verificar BootBoxJs.

Answer 9

Me gustaría ir con modaal. Es fácil de usar, tiene una amplia gama de métodos y se centra en la accesibilidad.