Ventana modal con jQuery

[Patricia]

Después de responder en otro hilo, lei la propuesta de abrir uno para ventana modal, y me pareció mejor.

Para empezar, estoy modificando el código para integrar el widget "Dialog" de jQuery UI (http://jqueryui.com/demos/dialog/).
En cuanto lo pueda probar, les mando el código a ver si hay otra forma mejor de hacerlo, soy nueva con el framework!!
Alguien probó algo ya?

Saludos a todos,
Patricia.

[Pablo Pazos]

Hola Patricia,

Está genial esta demo, tiene algunas cosas de lo que había comentado en otro mail (que se pueda mover la ventana y que se pueda cambiar de tamaño).

¿Hay alguna forma de indicarle a la ventana que ajuste su tamaño al tamaño del contenido? (no se si la idea es seguir usando el iframe o cargar el contenido por ajax y mostrarlo en la div de la ventana modal).

Creo que aparte se podría activar el fondo transparente (para que no se pueda hacer clic en la pagina hasta no cerrar la ventana modal).

Y la otra cosa que está bueno para ser amigable es lo que hace la ventana modal actual con los efectos de fadein y fadeout cuando abre y cierra.

Saludos!

Pablo.

2011/9/15 Patricia <patricia...@gmail.com>

--
Has recibido este mensaje porque estás suscrito al grupo "Yupp Framework PHP" de Grupos de Google.
Para ver este debate en la Web, visita https://groups.google.com/d/msg/yuppframeworkphp/-/e-FFLtjxe9UJ.
Para publicar una entrada en este grupo, envía un correo electrónico a yuppfram...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a yuppframeworkp...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/yuppframeworkphp?hl=es.

--
Atte.
Ing. Pablo Pazos Gutiérrez
LinkedIn: http://uy.linkedin.com/in/pablopazosgutierrez
Blog: http://informatica-medica.blogspot.com/
Sígueme en twitter: http://twitter.com/ppazos

[Patricia]

Si, en realidad yo lo he usado mostrando el contenido de la ventana modal en un DIV en lugar de un iframe.
También se pueden usar efectos, y si especifica que sea modal, se puede activar un fondo de color o semitransparente para el resto de la página. Fijate quea la derecha tenés varios ejemplos:

• con efectos: http://jqueryui.com/demos/dialog/#animated
  
• modal: http://jqueryui.com/demos/dialog/#modal
• Form modal: http://jqueryui.com/demos/dialog/#modal-form (este está bueno para autenticar usuarios, como está ahí)

No he podido dedicarle mucho tiempo esta semana (cuestiones de trabajo y de salud) pero en cuanto avance, lo comparto!

[pabl...@gmail.com]

Entiendo, habría que ver cómo integrar las llamadas que hoy le ponen
el src al iframe, para que en lugar de eso, llamen por ajax al
servidor y se le meta el contenido a la ventana modal.

¿Esto sabés porque fue? porque la ventana modal también carga
javascript, y me pasaba que al pedir por ajax y meter el código dentro
de una div, no me ejecutaba el js. Luego vi que hay una forma de
resolverlo, creando un nodo, poniéndole lo que tira el servidor
adentro, e inyectando ese nodo en el dom. Ahí parece que ejecuta el
JS.

Está buenísimo el segundo efecto con la imagen de fondo, y el tercero
con el form es ideal para los que hoy crean cosas o editan, por
ejemplo crear un nuevo módulo y editar un módulo.

Si se hace con una div, es fácil que el tamaño se ajuste al contenido
porque se puede hacer por CSS.


Buenísimo Patricia, seguimos en contacto. La semana que viene capaz te
puedo ayudar más a nivel de código, esta semana estuvo complicada :P

Saludos!
Pablo.

On Sep 15, 3:12 pm, Patricia <patricia.pern...@gmail.com> wrote:
> Si, en realidad yo lo he usado mostrando el contenido de la ventana modal en
> un DIV en lugar de un iframe.
> También se pueden usar efectos, y si especifica que sea modal, se puede
> activar un fondo de color o semitransparente para el resto de la página.
> Fijate quea la derecha tenés varios ejemplos:
>

>    - con efectos:http://jqueryui.com/demos/dialog/#animated
>    <http://jqueryui.com/demos/dialog/#animated%20>
>    - modal:http://jqueryui.com/demos/dialog/#modal
>    - Form modal:http://jqueryui.com/demos/dialog/#modal-form(este está

[pabl...@gmail.com]

Para complementar o que comenté de que no se ejecutan los scripts al
cargar contenido por AJAX, aquí están algunas soluciones posibles:

http://stackoverflow.com/questions/75943/how-do-you-execute-a-dynamically-loaded-javascript-block
http://unixpapa.com/js/dyna.html
http://ajaxpatterns.org/On-Demand_Javascript


Saludos,
Pablo.

[Patricia]

Gracias por la info.
No te preocupes, la semana que viene seguimos.

[TheFore]

como poder cooperar si no han mostrado ningún script del YUPP, yo
tengo algunos códigos pero no los mostrare sin tener seguro que podre
estar en los créditos del proyecto

[pabl...@gmail.com]

Hola Francisco,

Te he contestado con el link a donde está el código del CMS para
descargar en este hilo: http://groups.google.com/group/yuppframeworkphp/browse_thread/thread/a67f7db36177d297?hl=es_US

En ese hilo también están las instrucciones de cómo descargarlo.

Saludos.

[pabl...@gmail.com]

Estimados ¿cómo están?

¿Han podido integrar algo del código de la ventana modal al CMS?

Por mi parte estoy corrigiendo "cositas" en el código para que quede
más robusto. Ya hice algunos commits al SVN del proyecto que pueden
bajar, aunque pueden haber cosas que no funcionen 100% pero que estoy
corrigiendo ahora.

En breve actualizo el estado del desarrollo del "core" del CMS. Ojalá
puedan avanzar en la integración de la ventana modal para cerrar ese
tema y poder empezar a desarrollar más módulos y layouts.


Saludos!
Pablo.

On 18 sep, 00:37, "pablo....@gmail.com" <pablo....@gmail.com> wrote:
> Hola Francisco,
>
> Te he contestado con el link a donde está el código del CMS para

> descargar en este hilo:http://groups.google.com/group/yuppframeworkphp/browse_thread/thread/...

[Patricia]

Pablo, estuve haciendo pruebas la semana pasada con Dialog de jQuery.
Puedo mostrar el contenido de la página que se necesita en la ventana modal, pero tengo un par de problemas:

• no logro que muestre los css que quiero, ni que ajuste el tamaño al contenido! (que pensaba manejarlo con css también)
  
• no puedo hacer que uno pueda arrastrar la ventana o cambiarle de tamaño

Estaba viendo si el problema viene porque hay otro js para el menú, y en cuanto a los estilos trato de ver el tema de la precedencia con los que ya están cargados...
Esta semana viene bastante complicada para mí, por eso quedé ahí a mitad de camino. No quería comentar hasta no tener una prueba funcionando o algo puntual para preguntarte...

Me estuve basando en la documentacion de referencia de yupp (desde http://www.simplewebportal.net/yupp_framework_php_doc/index.html) para ver cóm incluir los css y otras cosas más.
Pero bueno, no me olvidé ni lo dejé de lado, sólo en stand by por estos días! ya te estaré preguntando de nuevo...
También estuve viendo los links que fuiste publicando acá en el grupo, así quelos tengo en cuenta por si sirven.
Te mantengo al tanto en la semana!

Saludos,
Patricia.

[Pablo Pazos]

Hola Patricia,

Va entre líneas.

2011/9/28 Patricia <patricia...@gmail.com>

Pablo, estuve haciendo pruebas la semana pasada con Dialog de jQuery.
Puedo mostrar el contenido de la página que se necesita en la ventana modal, pero tengo un par de problemas:

• no logro que muestre los css que quiero, ni que ajuste el tamaño al contenido! (que pensaba manejarlo con css también)
  

Hay 2 formas. Una es definir CSS global que se aplique a cada ventana, y otra es que en el HTML que cargás del servidor para mostrar el contenido de la ventana tenga un <style> declarado adentro. Creo que la primera opción es la mejor.
Algunas formas que he encontrado para adaptar el tamaño:

• http://bytes.com/topic/html-css/answers/819289-adapt-width-div-content
• http://www.daniweb.com/web-development/web-design/html-and-css/threads/223632
• http://www.highdots.com/forums/cascading-style-sheets/adapt-width-div-content-258048.html
• http://quomon.com/question-How-to-get-a-DIV-to-adjust-its-length-to-its-content-219.aspx

• no puedo hacer que uno pueda arrastrar la ventana o cambiarle de tamaño

Eso se puede dar porque no se está ejecutando el JS de la modal, dependiendo de donde se cargue.
¿El HTML que cargás del servidor incluye JS? Acordate que comenté que podría haber problemas con eso y pegué algunos links sobre cómo solucionarlo. Incluso usé una de las soluciones en el código que actualicé estos días en el SVN: http://yupp.googlecode.com/svn/trunk/YuppPHPFramework/
 

Estaba viendo si el problema viene porque hay otro js para el menú, y en cuanto a los estilos trato de ver el tema de la precedencia con los que ya están cargados...

(sin saber) creo que no te debería jorobar el js del menú al js de la modal, habría que ver el código para ver si hay conflictos.
 

Esta semana viene bastante complicada para mí, por eso quedé ahí a mitad de camino. No quería comentar hasta no tener una prueba funcionando o algo puntual para preguntarte...

No pasa nada, cualquier avance aunque sea mínimo, es un avance, y está bueno para que otros podamos ayudar si te trancás con algo. ¿Podrán enviar el código como adjunto al grupo?

De paso estaría bueno para la semana que viene armar una charlita por skype para ver el código, probarlo y corregirlo (hacemos un test-talk jeje).

Me estuve basando en la documentacion de referencia de yupp (desde http://www.simplewebportal.net/yupp_framework_php_doc/index.html) para ver cóm incluir los css y otras cosas más.
Pero bueno, no me olvidé ni lo dejé de lado, sólo en stand by por estos días! ya te estaré preguntando de nuevo...

No problem! (como coordinador del grupo trato de tirar un poquito de leña al fuego para que no se apague).
 

También estuve viendo los links que fuiste publicando acá en el grupo, así quelos tengo en cuenta por si sirven.
Te mantengo al tanto en la semana!

Genial!

Saludos
Pablo.
 

Saludos,

Patricia.

--
Has recibido este mensaje porque estás suscrito al grupo "Yupp Framework PHP" de Grupos de Google.

Para ver este debate en la Web, visita https://groups.google.com/d/msg/yuppframeworkphp/-/j6NjO3bdBhUJ.

Para publicar una entrada en este grupo, envía un correo electrónico a yuppfram...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a yuppframeworkp...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/yuppframeworkphp?hl=es.

[pabl...@gmail.com]

Estimados, hace tiempo que hablamos de esto y quería comentarles que
he desarrollado un par de plugins para el CMS, uno para la ventana
modal, y ya está disponible para descargar en el SVN:
http://yupp-cms.googlecode.com/svn/trunk/yupp-cms/

Además he hecho muchísimas mejoras y agregado varias funcionalidades
al sistema, dentro de poco voy a liberar la versión 0.2, les aviso
cuando esté.

Saludos,
Pablo.

---------- Forwarded message ----------
From: Pablo Pazos <pablo....@gmail.com>
Date: 28 sep 2011, 13:34
Subject: Ventana modal con jQuery
To: Yupp Framework PHP

Hola Patricia,

Va entre líneas.

2011/9/28 Patricia <patricia.pern...@gmail.com>

> Pablo, estuve haciendo pruebas la semana pasada con Dialog de jQuery.
> Puedo mostrar el contenido de la página que se necesita en la ventana
> modal, pero tengo un par de problemas:

>    - no logro que muestre los css que quiero, ni que ajuste el tamaño al

>    contenido! (que pensaba manejarlo con css también)

> Hay 2 formas. Una es definir CSS global que se aplique a cada ventana, y

otra es que en el HTML que cargás del servidor para mostrar el
contenido de
la ventana tenga un <style> declarado adentro. Creo que la primera
opción es
la mejor.
Algunas formas que he encontrado para adaptar el tamaño:

   -http://bytes.com/topic/html-css/answers/819289-adapt-width-div-
content
   -
   http://www.daniweb.com/web-development/web-design/html-and-css/
thread...
   -
   http://www.highdots.com/forums/cascading-style-sheets/adapt-width-
div...
   -
   http://quomon.com/question-How-to-get-a-DIV-to-adjust-its-length-to-
i...

>    -
>    - no puedo hacer que uno pueda arrastrar la ventana o cambiarle de